Vueのアイデアを使ってストレージをカプセル化する方法

背景

localStorage と sessionStorage という 2 つの API は、日常のフロントエンド開発で強力なストレージ ツールとして役立ちます。私たちは、これらをデータの保存によく使用します。日常的に操作する場合、通常は localStorage と sessionStorage を直接使用します。

ローカルストレージにアイテムを設定します。
セッションストレージ.setItem(xxx, xxx);
ローカルストレージのアイテムを取得します。
セッションストレージ.getItem(xxx);

あるいは、次のように単純にまとめる学生もいます。

const getItem = (キー) => {
   const serializedValue = window.localStorage.getItem(key) は any として扱われます。
   JSON.parse(serializedValue) を返します。
};
const setItem = (キー、値) => {
  if (window && window.localStorage) {
    window.localStorage.setItem(キー、JSON.stringify(値));
  }
};

これは使用上の大きな問題ではありませんが、コードが十分にエレガントではないと常に感じています。たまたま最近、2 人の兄弟のカプセル化を含む、いくつかの基礎となる基本ライブラリをカプセル化しました。面白いものを見つけました。編集者も皆さんと共有したい新しい経験やアイデアを持っています。

関数

• localStorage、sessionStorage 設定
• localStorage、sessionStorageの取得
• localStorage と sessionStorage から 1 つのアイテムを削除します
• localStorage、sessionStorage すべてのストレージをクリアする

目的

localStorage および sessionStorage API をカプセル化して、ストレージの追加、削除、変更、およびチェックを実装します。

アイデアの源

Vue2.0 を使用したことがあるなら、Object.defineProperty メソッドを知っているはずです。この API は Vue の応答性の核であり、データの変更を監視するために使用されますが、いくつかの欠点があります。

• オブジェクト型データに新しいキー/値ペアが追加されたり、既存のキー/値ペアが削除されたりしても、それを監視することはできません。その結果、オブジェクトデータに値を追加または削除したときに、依存関係を通知できず、ビューを駆動して応答性の高い更新を実行することができません。
• Vue2.0 では、インターセプターによる配列変更検出を実装しているため、配列プロトタイプのメソッドを通じて配列を操作する限り、検出できます。ただし、配列の添え字を通じてデータを操作する場合は、手動で操作する必要があります。

これらの問題は Vue 3.0 で解決されており、その解決策は ES6 の Proxy メソッドです。

プロキシは、特定の操作のデフォルトの動作を変更するために使用されます。これは、言語レベルで変更を加えることと同等であるため、一種の「メタプログラミング」、つまりプログラミング言語のプログラミングになります。

プロキシは、ターゲット オブジェクトの前に「インターセプション」レイヤーを設定するものと理解できます。オブジェクトへの外部アクセスは、まずこのインターセプション レイヤーを通過する必要があります。したがって、プロキシは外部アクセスをフィルターして書き換えるメカニズムを提供します。プロキシという単語の本来の意味はエージェントです。ここでは、特定の操作の「エージェントとして機能する」という意味で使用されており、「エージェント」と翻訳できます。

Proxy は自然なインターセプターおよびプロキシなので、Proxy を使用して localStorage および sessionStorage の操作をプロキシすることもできます。では、これ以上長々とせずに、すぐにコードを見てみましょう。

成し遂げる

var プロキシストレージ = {
  /**
   * @returns ストレージプロキシ
   * @例
   * proxyStorage.getStorageProxy(localStorage, '_')
   */
  getStorageProxy: (ストレージ、プレフィックス) => {
    if (!ストレージ)
      false を返します。
    const getKey = (prop) => `${prefix}.${String(prop)}`;
    新しいプロキシ(新しいオブジェクト(), {
      /**
       * ストレージを設定する
       * @ブール値を返す
       * @例
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * ストレージプロキシ.a = 1;
       */
      set(ターゲット、プロパティ、値) {
        ターゲット[prop] = 値;
        storage.setItem(getKey(prop), JSON.stringify(value));
        true を返します。
      },
      /**
       * ストレージを取得する
       * @ブール値を返す
       * @例
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * コンソールログ(storageProxy.a);
       */
      _ を取得します。
        JSON.parse(storage.getItem(getKey(prop)) || '') を返します。
      },
      /**
       * ストレージを削除する
       * @ブール値を返す
       * @例
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * storageProxy.a を削除します。
       */
      プロパティを削除します(_, prop) {
        ストレージからアイテムを削除します(getKey(prop));
        true を返します。
      },
      /**
       * クリアストレージ
       * @ブール値を返す
       * @例
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * オブジェクト.preventExtensions(ストレージプロキシ);
       */
      拡張機能を防止(ターゲット) {
        オブジェクト.preventExtensions(ターゲット);
        ストレージをクリアします。
        true を返します。
      },
      /**
       * クエリストレージ
       * @ブール値を返す
       * @例
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * storageProxy 内の 'a';
       */
      has(ターゲット、プロパティ) {
        試す {
          !!storage.key(prop) を返します。
        } キャッチ（エラー）{
          false を返します。
        }
      }
    });
  },
};

var proxyStorageTest = proxyStorage.getStorageProxy(localStorage, '_');

Proxy を使用して、localStorage および sessionStorage のプロキシ オブジェクトを返します。このプロキシ オブジェクトは、set、get、delete、preventExtensions、in などの操作をハイジャックします。

セット

storage.foo = v や storage['foo'] = v などのオブジェクト プロパティの設定をインターセプトし、ブール値を返します。プロキシ オブジェクトのプロパティに値を割り当て、割り当てをインターセプトし、対応するストレージの setItem を操作すると、対応するストレージに値を直接格納できます。

ストレージ.a = 1;
// または
ストレージ['a'] = 1;

得る

storage.foo や storage['foo'] などのオブジェクト プロパティの読み取りをインターセプトします。プロキシオブジェクトの属性値を読み取り、取得操作をインターセプトし、対応するキーを取得し、対応するストレージの getItem を操作して、対応するストレージから対応する値を取得します。

コンソールログ(ストレージ.a); // 1

プロパティの削除

削除ストレージ[propKey]操作をインターセプトし、ブール値を返します。ここでインターセプトされるのはオブジェクトのデータを削除する操作であり、データを削除するためにストレージに対して内部的にremoveItemの操作が実行されます。

proxyStorageTest.a を削除します。

拡張機能を禁止する

Object.preventExtensions(storage) をインターセプトし、ブール値を返します。オブジェクトの拡張不可能な操作をインターセプトし、対応するストレージに対して内部的にクリア操作を実行して、格納されているすべての値をクリアします。

オブジェクト.preventExtensions(プロキシストレージテスト);

もっている

プロキシ内の propKey の操作とオブジェクトの hasOwnProperty メソッドをインターセプトし、ブール値を返します。オブジェクトの属性を照会する操作をインターセプトし、対応するストレージにキーが存在するかどうかを照会します。

proxyStorageTest の 'a';

要約する

Proxy を使用して localStorage および sessionStorage の操作をプロキシし、シンプルなストレージ API をカプセル化します。プロキシを使用して、localStorage、sessionStorage、document.cookie、indexedDB を操作できます。もちろん、Proxy の機能はこれに限定されません。Vue 3.0 での Proxy の使用など、他にも多くの用途があります。この記事の焦点は、単純な API をカプセル化することではなく、このアイデアを誰もが学べるようにガイドすることです。

Vue のアイデアを使用してストレージをカプセル化する方法については、これで終わりです。ストレージをカプセル化するための Vue のアイデアの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。