Vue プロジェクトでデータ キャッシュとローカル ストレージを実装する方法

Vue プロジェクトでデータ キャッシュとローカル ストレージを実装する方法

Vue プロジェクトでは、データをローカルにキャッシュまたは保存する必要があるシナリオによく遭遇します。ネットワークリクエストの数を減らします。この記事では、Vue のプラグインと API を使用してデータ キャッシュとローカル ストレージを実装する方法を紹介し、具体的なコード例を示します。

1. データ キャッシュ

1. vue-ls プラグインを使用する
   vue-ls は、localStorage カプセル化に基づいた Vue プラグインであり、操作を簡素化するのに役立ちます。キャッシュデータの。まず、vue-ls プラグインをインストールする必要があります。

npm install vue-ls --save

2. main.js に vue-ls を導入し、設定します
   main.js ファイルで、次のことが必要です。 vue-ls を導入し、キャッシュの有効期限や名前空間などの基本的な設定を行います。コード例は次のとおりです。

import Vue from 'vue'
import storage from 'vue-ls'

Vue.use(storage, {
  namespace: 'vuejs__', // 命名空间
  name: 'ls', // 局部名称Vue.prototype.$ls
  storage: 'local' // 存储名称：session, local, memory
})

3. コンポーネントでキャッシュされたデータを使用する
   コンポーネントでは、this.$ls を使用してキャッシュされたデータにアクセスし、this.$ls.set を使用できます。 () メソッドを使用してデータを設定し、this.$ls.get() メソッドを使用してデータを取得します。コード例は次のとおりです:

export default {
  data() {
    return {
      cacheData: ''
    }
  },
  methods: {
    saveCacheData() {
      this.$ls.set('cacheData', this.cacheData)
    }
  },
  mounted() {
    this.cacheData = this.$ls.get('cacheData')
  }
}

2. データのローカル ストレージ

1. localStorage API
   を使用するvue-ls プラグインの使用に加えて、ブラウザを直接使用することもできます。 データのローカル ストレージを実装するための localStorage API を提供します。コード例は次のとおりです。

export default {
  data() {
    return {
      localData: ''
    }
  },
  methods: {
    saveLocalData() {
      localStorage.setItem('localData', JSON.stringify(this.localData))
    }
  },
  mounted() {
    this.localData = JSON.parse(localStorage.getItem('localData'))
  }
}

2. sessionStorage API の使用
   同様に、sessionStorage API を使用してデータのローカル ストレージを実装することもできますが、保存されたデータは保存後に削除されます。ブラウザセッションが終了します。自動的に削除されます。コード例は次のとおりです。

export default {
  data() {
    return {
      sessionData: ''
    }
  },
  methods: {
    saveSessionData() {
      sessionStorage.setItem('sessionData', JSON.stringify(this.sessionData))
    }
  },
  mounted() {
    this.sessionData = JSON.parse(sessionStorage.getItem('sessionData'))
  }
}

localStorage および sessionStorage API を使用する場合、オブジェクト データをストレージ用の JSON 文字列に変換する必要があり、その際に JSON 解析が実行されることに注意してください。読む。

概要:

Vue プロジェクトでは、vue-ls プラグイン、またはブラウザーが提供する localStorage および sessionStorage API を使用して、データ キャッシュとローカル ストレージを実装できます。さまざまなシナリオに適した方法が異なるため、特定のニーズに応じて適切な方法を選択できます。データ キャッシュとローカル ストレージを通じて、アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させることができます。

上記は、Vue プロジェクトにおけるデータのキャッシュとローカル ストレージの概要とコード例です。この記事がお役に立てば幸いです!

以上がVue プロジェクトでデータ キャッシュとローカル ストレージを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。