Vueのキャッシュ方法の例の詳細な説明

最近、「フロントエンドキャッシュ」という新しい要件が作成されました

要件背景: フォームへの高頻度の繰り返し入力の問題を解決するには、ページを開いたときに最後に入力したデータを自動的に入力する必要があり、データの保存期間は 1 週間 (有効期間は 7 日間) です。
キャッシュに関して最初に思い浮かぶのはlocalstorageとsessionStorageです。

セッションストレージ

セッションキャッシュとも呼ばれ、ユーザーがブラウザウィンドウを閉じるとデータが削除されます。

sessionStorage.setItem("key","value");//ストレージ sessionStorage.getItems("key");//値を取得するには押してください sessionStorage.removeItems("key");//キーを押すと1つ削除されます sessionStorage.clear();//すべてのデータを削除します sessionStorage.length;//データの数を取得します sessionStorage.valueOf();//すべての値を取得します

ローカルストレージ

保存されたデータには期限はありません。削除されない限り、データは存在します。

localstorage.setItem("key","value");//データを保存する localstorage.getItem("key");//データを読み取る localstorage.removeItem("key",);//単一のデータを削除する localstorage.clear();//すべてのデータを削除する localstorage.key(index);//特定のインデックスのキーを取得する
キーと値は両方とも文字列である必要があります。Web Storage API は文字列に対してのみ操作できます。

ブラウザウィンドウを閉じると sessionStorage データがクリアされるため、開発したいニーズには適用できません。これら 2 つのソリューションだけを考えると、localstorage が比較的適しているように思われますが、localstorage をストレージに使用し、有効期限を設定すると、コードの観点からさらに面倒になります。

ローカルストレージの具体的な実装アイデア

1. データを保存するときにタイムスタンプを追加する

データが大きい場合は、localstorage を使用してデータを保存するときに時刻を書き込み、取得するときに現在の時刻と比較することができます。

プロジェクト開発では、保存時にタイムスタンプを追加する一般的なメソッドを書くことができます。

  エクスポート関数 setLocalStorageAndTime (キー, 値) {
  window.localStorage.setItem(キー、JSON.stringify({ データ: 値、時間: 新しい Date().getTime() }))
  }

プロジェクトへの応用

  データがある場合は再度保存します setLocalStorageAndTime('XXX', {name: 'XXX'})

2. データ取得時に現在の時刻と比較する

エクスポート関数 getLocalStorageAndTime (キー、exp = 86400000) {
 // データを取得する let data = window.localStorage.getItem(key)
 if (!data) が null を返す
 dataObj = JSON.parse(データ) とします。
 // 有効期限と比較する if (new Date().getTime() - dataObj.time > exp) {
  // 期限切れの場合はnullを返す
  ローカルストレージを削除します(キー)
  console.log('情報の有効期限が切れました')
  nullを返す
 } それ以外 {
  dataObj.dataを返す
 }
}

プログラマーの最大の特徴は怠惰です。彼らはプラグインを見逃すことはなく、可能であれば CV を手動で入力することは決してありません。書くのが面倒すぎるので、localstorage の使用を断念し、よりシンプルで便利な方法を探しました。最終的に同僚の勧めで Vue.ls を選んだので、Vue.ls を紹介したいと思います。

ビュールス

Vue によってカプセル化されたローカルストレージメソッド。 Vue コンテキスト内からローカルストレージ、セッションストレージ、メモリストレージを使用するための Vue プラグイン。使いやすく、API の説明も包括的です。

インストール

国立博物館

npm インストール vue-ls --save

糸

糸を追加ビュー

使用

Vue-ls ストレージ API

'vue-ls' からストレージをインポートします。
 
オプション = {
 namespace: 'vuejs__', // キープレフィックス name: 'ls', // Vue 変数に名前を付けます。[ls] または this.[$ls],
 storage: 'local', // ストレージ名: session, local, memory
};
 
Vue.use(ストレージ、オプション);
// または Vue.use(Storage);
 
新しいVue({
  el: '#app',
  マウント: 関数() {
    Vue.ls.set('foo', 'boo');
    // 有効期間を設定します Vue.ls.set('foo', 'boo', 60 * 60 * 1000); // 1 時間有効 Vue.ls.get('foo');
    Vue.ls.get('boo', 10); // boo が設定されていない場合はデフォルト値 10 を返します 
    
    コールバックを(val, oldVal, uri) => {
     console.log('localStorage の変更', val);
    } 
    
    Vue.ls.on('foo', callback) // foo キーの変更を検出し、コールバックをトリガーします Vue.ls.off('foo', callback) // 検出しません Vue.ls.remove('foo'); // 削除します }
});

グローバル

ビュールス

コンテクスト

これ.$ls

APIの説明

Vue.ls.get(名前、定義)

ストレージ内の名前の値を返します。返す前にJSONから値を内部的に解析する

def: デフォルトは null です。設定されていない場合は、名前を返します。
Vue.ls.set(名前、値、有効期限)

ストレージ内のnameの値を設定し、その値をJSONに変換する

有効期限: デフォルトは null、名前の有効期間はミリ秒単位です

Vue.ls.remove(名前)

ストレージから名前を削除します。正常に削除された場合は true を返し、それ以外の場合は false を返します。

Vue.ls.clear()

ストレージをクリアします。

Vue.ls.on(名前、コールバック)

他のタグの名前の変更を引き続き監視し、変更が発生したときにコールバックをトリガーして、次のパラメータを渡します。

newValue: 永続的なJSONから解析された現在のストレージ内の名前
oldValue: 永続的なJSONから解析された古いストレージ内の名前
url: タブからURLを変更します

Vue.ls.off(名前、コールバック)

以前のリスナーを削除します Vue.ls.on(name, callback)

練習する

ストレージ: キーと値のペアの形式、最後のパラメータは有効期間です

値: パラメータは保存されるキーです

表示: 保存されたデータはローカルストレージで表示できます

要約する

localstorage（ローカルストレージ）は永続的な保存のためのファイルとしてローカルに保存されます。sessionstorage（セッションストレージ）は一時的な保存のためのものです。Vue.ls は Vue によってカプセル化されたローカルストレージ方式で、シンプルで便利で使いやすいです。 localStorage と sessionStorage は文字列型のみを保存できます。複雑なオブジェクトの場合は、ECMAScript が提供する JSON オブジェクトの stringify メソッドと parse メソッドを使用して処理できます。

Vue のキャッシュ方法についての記事はこれで終わりです。Vue のキャッシュ方法についてのより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: