Comment implémenter la mise en cache des données et le stockage local dans les projets Vue

Comment implémenter la mise en cache des données et le stockage local dans les projets Vue

Dans les projets Vue, nous rencontrons souvent des scénarios dans lesquels les données doivent être mises en cache ou stockées localement pour améliorer l'expérience utilisateur et réduire le nombre de requêtes réseau. Dans cet article, je présenterai comment utiliser les plug-ins et les API de Vue pour implémenter la mise en cache des données et le stockage local, et je fournirai des exemples de code spécifiques.

1. Mise en cache des données

1. Utiliser le plug-in vue-ls
   vue-ls est un plug-in Vue basé sur l'encapsulation localStorage, qui peut nous aider à simplifier le fonctionnement de la mise en cache des données. Tout d'abord, nous devons installer le plug-in vue-ls :

npm install vue-ls --save

2. Introduire vue-ls dans main.js et le configurer
   Dans le fichier main.js, nous devons introduire vue-ls et effectuer les configurations de base, comme la définition du délai d'expiration du cache, de l'espace de noms, etc. L'exemple de code est le suivant :

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. Utilisation des données mises en cache dans les composants
   Dans les composants, nous pouvons utiliser this.$ls pour accéder aux données mises en cache, utiliser la méthode this.$ls.set() pour définir les données et utiliser ceci . Méthode $ls.get() pour obtenir des données. L'exemple de code est le suivant :

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

2. Stockage local des données

1. Utilisation de l'API localStorage
   En plus d'utiliser le plug-in vue-ls, on peut également utiliser directement l'API localStorage fournie par le navigateur pour implémenter stockage local des données. L'exemple de code est le suivant :

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

2. Utilisation de l'API sessionStorage
   De même, nous pouvons également utiliser l'API sessionStorage pour implémenter le stockage local des données, mais les données stockées seront automatiquement supprimées après la fin de la session du navigateur. L'exemple de code est le suivant :

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

Il convient de noter que lors de l'utilisation des API localStorage et sessionStorage, les données de l'objet doivent être converties en chaîne JSON pour le stockage et l'analyse JSON est effectuée lors de la lecture.

Résumé :

Dans le projet Vue, nous pouvons utiliser le plug-in vue-ls ou les API localStorage et sessionStorage fournies par le navigateur pour implémenter la mise en cache des données et le stockage local. Différentes méthodes conviennent à différents scénarios et vous pouvez choisir la méthode appropriée en fonction de besoins spécifiques. Grâce à la mise en cache des données et au stockage local, nous pouvons améliorer les performances des applications et l'expérience utilisateur.

Ce qui précède est l'introduction et des exemples de code de mise en cache et de stockage local des données dans le projet Vue. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!