ローカルストレージとプロキシの使い方についてまとめました【JavaScript/LocalStorage/Proxy】

LocalStrage（ローカルストレージ）とProxy（プロキシ）についてまとめたのでメモ。

LocalStrage（ローカルストレージ）とは
1. LocalStrageの使い方
2. LocalStrageの確認方法
Proxy（プロキシ）とは
1. setハンドラーでプロパティの値が変更された時の処理
2. getハンドラーでプロパティにアクセスした時の処理
ブラウザの背景パターンと色を変更するサンプル
完成したサンプルを確認する（デモ）
まとめ

LocalStrage（ローカルストレージ）とは

LocalStrageは、キーと値の組み合わせをブラウザに保存する仕組みです。
ブラウザを閉じたり、再び開いたりしても値は保持されます。

キーと値の組み合わせは、オブジェクトに似ていますが文字列です。
オブジェクトをLocalStrageに保存するには、一旦文字列に変換する必要があります。

LocalStrageの使い方

例えば、オブジェクトをLocalStrageに保存するには、次のようにします。

//LocalStrageに値を保存
localStorage.setItem([キーの名前],[値])

次の例は、オブジェクトをLocalStrageに保存する例です。
ポイントは、一旦文字列に変換してから保存しているところです。

//オブジェクト
const patternLocal = {
  pattern:"pattern1",
  bgcolor:"#fdeac1"
};
//オブジェクトをJSON文字列に変換
const json = JSON.stringify(patternLocal);
//データ保存
localStorage.setItem('choice-data',json)

LocalStrageから値を取り出すには、次のようにします。

//LocalStrageから値を取得
localStorage.getItem([キーの名前],[値])

先程のオブジェクトを取り出すコードがこちらです。
取り出した値を確認すると、文字列で取得できているのが確認できます。
最終的にはオブジェクトに変換します。

//データ取得
const result = localStorage.getItem('choice-data');
//タイプを確認
console.log(typeof result); //string
//オブジェクトに変換
const getObj = JSON.parse(result);
//タイプを確認
console.log(typeof getObj); //object

LocalStrageの確認方法

LocalStrageの値はブラウザに保存されますが、値は検証ツール（デベロッパーモード）で確認できます。以下は「Google Chrome」での確認方法です。

検証ツール（デベロッパーモード）を開く
Applicationを選択
Storage→Local Storageを選択
確認したいドメインを選択

以下のCode Penのページをデベロッパーモードで確認します。

See the Pen localStoragte by donguri2020 (@m-ke) on CodePen.

すると、次のような値がLocalStrageに保存されていることが確認できます。

値がブラウザにあっても問題ありませんが、気になる場合は「ローカルストレージを削除する」ボタンをクリックして削除してください。

Proxy（プロキシ）とは

Proxyとは、オブジェクトに対して何かしらアクションがあった時、独自の動作を設定することができます。構文は次の通りです。

ターゲットにするオブジェクトと、アクションがあった時に実行するオブジェクトを設定します。
名前はそれぞれtargetとhandlerです。

//ターゲットにするオブジェクト
const target = {
  name: "Bob",
  age: 28
};
//ターゲットオブジェクトにアクションがあった時、実行するオブジェクト
const handler = {
　　//何かしらの処理
};
//ターゲットオブジェクトとハンドラーオブジェクトを引数にしてインスタンス化
const pxy = new Proxy(target,handler);

setハンドラーでプロパティの値が変更された時の処理

オブジェクトのプロパティの値が変更された時、何かしらアクションを起こしたいときはsetハンドラーを使います。その際、渡ってくる引数の値は次の通りです。

//ターゲットオブジェクトにアクションがあった時、実行するオブジェクト
const handler = {
  //プロパティの値が変更された時
  set: function(target, prop, value, receiver) {
　　　　　　　　　　//target = ターゲットオブジェクト
　　　　　　　　　　//prop = 変更されたプロパティ
　　　　　　　　　　//value = 変更された値
　　　　　　　　　　//receiver　 = proxyオブジェクト
  }

渡ってくる値を使えば、オブジェクトのプロパティが変更された事を感知して、コンソールに値を出力する。なんでことができます。以下はその例です。ボタンを押すたびに異なる数字がプロパティに代入されます。

See the Pen wvJbJad by donguri2020 (@m-ke) on CodePen.

コンソールで確認すると、プロキシ経由、ターゲットオブジェクト共にプロパティが変更されています。

ターゲットオブジェクトに値をセットしているのはこの部分です。

//ターゲットオブジェクト（obj）にプロパティを設定
Reflect.set(target,porp,value,receiver);

このReflectオブジェクトの記述がないと、コンソールログの出力は次のようになります。

ターゲットオブジェクトの値が「undefined」となり、更新されていないことが確認できます。ターゲットオブジェクトにも変更した値を反映したいときは、なにかしら値を反映する記述が必要です。

getハンドラーでプロパティにアクセスした時の処理

オブジェクトのプロパティにアクセスした時、何かしらアクションを起こしたいときはgetハンドラーを使います。その際、渡ってくる引数の値は次の通りです。

//ターゲットオブジェクトにアクションがあった時、実行するオブジェクト
const handler = {
  //プロパティの値が変更された時
  get: function(target, prop, receiver) {
　　　　　　　　　　//target = ターゲットオブジェクト
　　　　　　　　　　//prop = 変更されたプロパティ
　　　　　　　　　　//receiver　 = proxyオブジェクト
  }

渡ってくる値を使えば、オブジェクトのプロパティにアクセスしたことを感知して、コンソールに値を出力することができます。以下はその例です。
ageプロパティが変更された時だけ、コンソールに値を出力します。

//ターゲットにするオブジェクト
const target = {
  name: "Bob",
  age: 28
};
//ハンドラーオブジェクト（トラップ）
//ターゲットオブジェクトにアクションがあった時、実行するオブジェクト
const handler = {
  //プロパティにアクセスがあった時
  get: function(target, prop, receiver) {
    if (prop === "age") {
      return "プロパティの年齢が呼び出されました！";
    }
  }
};
//ターゲットオブジェクトとハンドラーオブジェクトを引数に設定してインスタンス化
const pxy = new Proxy(target,handler);
console.log(pxy.age); //プロパティの年齢が呼び出されました！

ブラウザの背景パターンと色を変更するサンプル

LocalStrageを使えば、ユーザーに設定してもらったデータを元にして、何かしらのページが作成できます。
またProxyを使えば、ユーザーに選択してもらったデータをリアルタイムでウェブページに反映できます。
上記を踏まえて、ユーザーが設定した背景パターンと色のデータをLocalStrageに保存しておき、再度訪れたときに同じデザインが再現される。といったサンプルを作成しました。