Vue menutup halaman dan mengosongkan storan setempat

Dengan pengemaskinian dan lelaran berterusan rangka kerja bahagian hadapan, Vue.js secara beransur-ansur telah menjadi salah satu standard untuk pembangunan bahagian hadapan. Dalam proses pembangunan Vue.js, kami sering menggunakan storan setempat (localStorage) untuk menyimpan beberapa maklumat pengguna atau beberapa data cache. Walau bagaimanapun, selepas pengguna menutup halaman, data yang disimpan secara setempat ini sering menyebabkan risiko keselamatan atau menjejaskan pengendalian aplikasi lain. Untuk melakukan ini, kita perlu memikirkan cara mengosongkan storan setempat semasa menutup halaman dalam Vue.js.

Amalan umum

Dalam Vue.js, untuk mengosongkan storan setempat, anda perlu menggunakan localStorage.removeItem() untuk memadamkannya. Apabila kami menambah storan pada halaman, gunakan kaedah localStorage.setItem() untuk menyimpan nilai dan kunci yang sepadan. Contohnya:

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

Apabila kita mahu memadamkan pasangan nilai kunci, gunakan kaedah localStorage.removeItem() dan masukkan nama kunci. Contohnya:

localStorage.removeItem('user_name');

Dalam keadaan biasa, kita boleh mendengar acara penutupan halaman, menentukan masa halaman ditutup, dan kemudian melakukan operasi mengosongkan storan. Contohnya:

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

Tetapi dalam Vue.js, kami tidak boleh terus menggunakan objek tetingkap untuk mendengar acara penutupan halaman. Jadi kita perlu mencari beberapa penyelesaian Vue.js.

Pemalam Vue

Pemalam Vue ialah mekanisme lanjutan Vue.js, yang membolehkan kami merangkum beberapa fungsi ke dalam pemalam untuk kami memanggil komponen Vue.js. Jadi kita boleh cuba menulis pemalam Vue yang mendengar acara penutupan halaman dan mengosongkan storan setempat.

Pertama, kita perlu menulis pemalam Vue untuk merangkum operasi mengosongkan storan setempat. Dalam pemalam, kami boleh menggunakan Vue.prototype untuk melanjutkan prototaip Vue.js untuk memudahkan panggilan dalam komponen. Contohnya:

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

Kemudian, kita boleh menggunakannya dalam Vue.js. Mula-mula, anda perlu memperkenalkan pemalam dan mendaftarkannya dalam pilihan permulaan Vue.js. Contohnya:

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')

Dalam komponen, kita boleh mengosongkan storan setempat melalui kaedah $cleanStorage(). Contohnya:

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

Walau bagaimanapun, kaedah ini masih mempunyai had tertentu. Oleh kerana Vue.js tidak menyediakan operasi pemusnahan komponen yang serupa dengan $scope.$on('$destroy', function() {} AngularJS), kita masih perlu mempertimbangkan cara untuk memusnahkan komponen dalam keadaan tertentu.

Vue.mixin

Vue.mixin ialah satu lagi mekanisme lanjutan Vue.js yang membolehkan kami mencampurkan berbilang komponen untuk mencapai penggunaan semula kod. Kami boleh menulis campuran global dan mendengar cangkuk kitaran hayat beforeDestory di dalamnya, dan mengosongkan storan setempat dalam cangkuk ini.

Pertama, kita perlu menulis campuran global dan mendengar cangkuk kitaran hayat beforeDestory di dalamnya. Contohnya:

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

Kemudian, kita perlu melakukan pencampuran global dalam pilihan permulaan Vue.js. Contohnya:

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')

Dengan cara ini, kita tidak perlu menulis kaedah untuk mengosongkan storan setempat dalam setiap komponen. Hanya dengar cangkuk kitaran hayat beforeDestory dalam campuran global. Walau bagaimanapun, kaedah ini juga mempunyai beberapa kelemahan, iaitu, ia boleh menjejaskan kitaran hayat beberapa komponen dan membawa kepada beberapa situasi yang tidak normal.

Ringkasan

Di atas ialah dua kaedah pembersihan storan tempatan dalam Vue.js. Mereka menggunakan pemalam Vue dan menggunakan Vue.mixin. Kedua-dua kaedah mempunyai kelebihan dan kekurangan mereka sendiri, dan anda boleh memilih mengikut keperluan sebenar dan senario perniagaan. Pada masa yang sama, tidak kira kaedah yang digunakan, anda mesti memberi perhatian kepada keselamatan data semasa proses mengosongkan storan tempatan untuk mengelakkan kebocoran maklumat atau isu keselamatan lain.

Atas ialah kandungan terperinci Vue menutup halaman dan mengosongkan storan setempat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!