Vue ferme la page et efface le stockage local

Avec la mise à jour continue et l'itération des frameworks front-end, Vue.js est progressivement devenu l'un des standards du développement front-end. Dans le processus de développement de Vue.js, nous utilisons souvent le stockage local (localStorage) pour stocker certaines informations utilisateur ou certaines données du cache. Cependant, une fois la page fermée par l'utilisateur, ces données stockées localement entraînent souvent des risques de sécurité ou affectent le fonctionnement d'autres applications. Pour ce faire, nous devons réfléchir à la manière de vider le stockage local lors de la fermeture de la page dans Vue.js.

Pratique générale

Dans Vue.js, pour effacer le stockage local, vous devez utiliser localStorage.removeItem() pour le supprimer. Lorsque nous ajoutons du stockage à la page, utilisez la méthode localStorage.setItem() pour stocker la valeur et la clé correspondante. Par exemple :

localStorage.setItem('user_name', '张三');

Lorsque nous voulons supprimer une paire clé-valeur, utilisez la méthode localStorage.removeItem() et transmettez simplement le nom de la clé. Par exemple :

localStorage.removeItem('user_name');

Dans des circonstances normales, nous pouvons écouter l'événement de fermeture de la page, déterminer quand la page est fermée, puis effectuer l'opération d'effacement du stockage. Par exemple :

window.onbeforeunload = function(){
    localStorage.removeItem('user_name');
}

Mais dans Vue.js, nous ne pouvons pas utiliser directement l'objet window pour écouter l'événement de fermeture de page. Nous devons donc trouver des solutions Vue.js.

Plug-in Vue

Le plug-in Vue est un mécanisme d'extension de Vue.js, qui nous permet d'encapsuler certaines fonctions dans des plug-ins pour que nous puissions appeler des composants Vue.js. Nous pouvons donc essayer d'écrire un plug-in Vue qui écoute l'événement de fermeture de page et efface le stockage local.

Tout d'abord, nous devons écrire un plug-in Vue pour encapsuler l'opération de suppression du stockage local. Dans le plug-in, nous pouvons utiliser Vue.prototype pour étendre le prototype de Vue.js afin de faciliter l'appel de composants. Par exemple :

const storageCleaner = {
  install(Vue) {
    Vue.prototype.$cleanStorage = function () {
      localStorage.clear();
    }
  }
}

Ensuite, nous pouvons l'utiliser dans Vue.js. Tout d'abord, vous devez introduire le plug-in et l'enregistrer dans l'option d'initialisation de Vue.js. Par exemple :

import Vue from 'vue'
import App from './App.vue'
import storageCleaner from './plugins/storageCleaner'

Vue.config.productionTip = false
Vue.use(storageCleaner)

new Vue({
  render: h => h(App),
}).$mount('#app')

Dans le composant, nous pouvons effacer le stockage local via la méthode $cleanStorage(). Par exemple :

export default {
  methods: {
    logout() {
      //清除本地存储
      this.$cleanStorage();
    }
  }
}

Cependant, cette méthode présente encore certaines limites. Étant donné que Vue.js ne fournit pas d'opération de destruction de composants similaire à $scope.$on('$destroy', function() {} d'AngularJS), nous devons également réfléchir à la façon de détruire les composants dans certaines circonstances.

Vue.mixin

Vue.mixin est un autre mécanisme d'extension de Vue.js, qui nous permet de mélanger plusieurs composants pour réaliser la réutilisation du code. Nous pouvons écrire un mixin global et y écouter le hook du cycle de vie beforeDestory, et effacer le stockage local dans ce hook.

Tout d'abord, nous devons écrire un mixin global et y écouter le hook du cycle de vie beforeDestory. Par exemple :

const storageCleanerMixin={
    beforeDestroy(){
        localStorage.clear();
    }
}

Ensuite, il faut faire un mixin global dans les options d'initialisation de Vue.js. Par exemple :

import Vue from 'vue'
import App from './App.vue'
import storageCleanerMixin from './mixins/storageCleanerMixin'

Vue.mixin(storageCleanerMixin)

new Vue({
  render: h => h(App),
}).$mount('#app')

De cette façon, nous n'avons pas besoin d'écrire une méthode pour vider le stockage local dans chaque composant. Écoutez simplement le hook du cycle de vie beforeDestory dans le mixin global. Cependant, cette méthode présente également certains inconvénients, c'est-à-dire qu'elle peut affecter le cycle de vie de certains composants et conduire à des situations anormales.

Résumé

Ci-dessus sont deux méthodes de suppression du stockage local dans Vue.js. Ils utilisent le plug-in Vue et utilisent Vue.mixin. Les deux méthodes ont leurs propres avantages et inconvénients, et vous pouvez choisir en fonction des besoins réels et des scénarios commerciaux. Dans le même temps, quelle que soit la méthode utilisée, vous devez faire attention à la sécurité des données pendant le processus d'effacement du stockage local afin d'éviter les fuites d'informations ou d'autres problèmes de sécurité.

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!