1. 程式人生 > >SessionStorage前進與後退快取——元件通訊之一

SessionStorage前進與後退快取——元件通訊之一

前進與快取應該在一個會話中,因此避免localStorage本地儲存

新建store.js,加上

//sessionStorage會話儲存
var storage = { //設定一個storage物件,用來實現sessionStorage會話儲存
    set(key,value){
        sessionStorage.setItem(key,JSON.stringify(value));
    },
    get(key){
        return JSON.parse(sessionStorage.getItem(key));
    },
}
export default storage;

在XX.vue介面中:

手機號碼輸入框:<input type="text" id="phone" v-model="phone" placeholder="" @keyup="labelHide(1)" @focus="labelHide(1)"
      oninput="value=value.replace(/[^\d]/g,'')">

script中匯入  

import storage from '../vuex/store.js';

watch中設定資料加上:

phone(data) {
    var _this = this;
    storage.set('phone',_this.phone)
},

mouted獲取資料加上:

_this.phone=storage.get("phone")

但是,快取大量資料應當使用keep-alive!