緩存表單輸入內容——本地臨時儲存

背景：頁面數據展示過多，我們會添加分頁和搜索來定位需要查看的數據，當頁面切換后，搜索的關鍵字會被清空

解決方案：sessionStorage 關閉瀏覽器前均存儲檢索的關鍵字

1.存儲方法：

　　sessionStorage.setItem('xxx', null)

  sessionStorage.setItem('xxx', JSON.stringify(data))

2.讀取方法：

sessionStorage.getItem('xxx') ? JSON.parse(sessionStorage.getItem('xxx')) : null

說明：使用json字符串存儲，是為了存儲更多的數據（可以是一個對象），而在清空操作時，以及設置唯一的命名時需要注意避免重復

推薦：vue 的計算屬性獲取搜索的關鍵字，在初始化加載頁面后進行判斷賦值

    //初始化頁面時：也可以在監聽時觸發
　　if (this.search_kwd_app) { // 有搜索歷史
　　　　//賦值操作
    }
　　//計算屬性
    search_kwd_app () { // 搜索值
      return sessionStorage.getItem('xxx') ? JSON.parse(sessionStorage.getItem('xxx')) : null
    },

補充：區分script邏輯中的對象與方法

1.使用對象的形式的有：

name: "",//命名空間
provide: ["inputParam"],//需要傳入的私有參數，推薦value為函數
inject: ["inputParam"],//讀取傳入的私有參數
mixins: [],//混入一個完整的邏輯（請求-賦值-方法）
props: [],//組件傳入屬性，推薦value為對象
components: {}, //組件
computed: {}, //計算屬性
methods: {}, //方法
watch: {//監聽
 aaa: {

　　immediate: false,

　　handler (val) {

　　　　console.log(val)

　　},

},

2.使用函數形式輸出的有：

provide() { //存入私有參數：推薦使用函數，data同理
    return {
        inputPrama: this
    }
},
data() { //數據：與inject、mixins、computed等的status不可重復定義
    return {};
},
created() { //初始化：一般獲取或設置默認的值

},
mounted() { // 加載頁面后：在組件封裝時推薦使用，如js加載后、dow創建完成后的一系列操作

},
beforeDestroy() { //生命周期：頁面注銷前，即頁面A——頁面B切換時會觸發
    // this.jsPlumbInstance.deleteEveryEndpoint()
}