vue のキャッシュを実装するにはいくつかの方法があります-Vue.js-php.cn

vue のキャッシュを実装するにはいくつかの方法があります

青灯夜游

リリース： 2022-12-28 19:11:47

オリジナル

18392 人が閲覧しました

Vue にはデータをキャッシュする 4 つの方法があります: 1. localStorage を使用する、構文「localStorage.setItem(key, value)」; 2. sessionStorage を使用する、構文「sessionStorage.setItem(key, value)」; 2. sessionStorage を使用する、構文「sessionStorage.setItem(key, value)」。 3. storage.js プラグインをインストールして参照し、キャッシュにプラグインを使用します; 4. Vue.js アプリケーション用に特別に開発された状態管理モードである vuex を使用します。

vue のキャッシュを実装するにはいくつかの方法があります

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vu でキャッシュを実装するいくつかの方法:

最初の 2 つ

* localStorage

  window.localStorage.setItem(key,value)
  window.localStorage.getItem(key)

ログイン後にコピー

* sessionStorage

 window.sessionStorage.setItem(key,value)
  window.sessionStorage.getItem(key)

ログイン後にコピー

localStorage と sessionStorage の違い
https://blog.csdn.net/qq_31741481/article/details/88054069

3 番目の方法 (推奨) - storage.js

使用方法:

import storage from &#39;store&#39;
// Store current user
store.set(&#39;user&#39;, { name:&#39;Marcus&#39; })

// Get current user
store.get(&#39;user&#39;)

// Remove current user
store.remove(&#39;user&#39;)

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
	console.log(key, &#39;==&#39;, value)
})

ログイン後にコピー

テスト済み、デフォルトは localStorage に保存されます

store.js にはさまざまな内容が含まれていますたとえば、localStorage が失敗する一部のシナリオでは、cookieStorage.js を使用できます。これをマスターすれば、基本的にすべてのキャッシュソリューションを一度に理解できるようになります。

all.js すべてのストレージを 1 つの便利な場所にまとめます。
localStorage.js localStorage に値を保存します。最新のすべてのブラウザ。
sessionStorage.js 値を sessionStorage に保存します。
cookieStorage.js 値を Cookie に保存します。 Safari プライベートモード。
memoryStorage.js 値をメモリに保存します。常にストア機能を確保するための優れたフォールバック。
oldFF-globalStorage.js 値を globalStorage に保存します。従来の Firefox 3 でのみ有効です。
oldIE-userDataStorage.js 値を userData に保存します。従来の IE 6 でのみ有効です。

詳細については、公式 :store.js (https://github.com/marcuswestin/store.js#readme)を参照してください。

4 番目のタイプ - vuex

は、より複雑な vue シングルページアプリケーションの構築に適しています。

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態が予測可能な方法で変化することを保証します。 Vuex は、Vue の公式デバッグツール devtools 拡張機能にも統合されており、ゼロ構成のタイムトラベルデバッグ、ステータススナップショットのインポートおよびエクスポートなどの高度なデバッグ機能を提供します。

[関連する推奨事項:「

vue.js チュートリアル」]

以上がvue のキャッシュを実装するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。