Vue 保留搜索框的搜索內容（sessionStorage）

最近遇到個需求：因為是后台管理系統，會頻繁切換頁面（路由），再次切換路由就重新加載頁面了，重新輸入條件很繁瑣，需要保留搜索框的內容。（廢話，看不同項目的不同需求吧）

 

保留搜索框內容：

利用sessionStorage來保存每次搜索框的內容。

后台管理系統的搜索欄除了篩選條件肯定還會有搜索按鈕吧

 

 

比如：輸入框v-model綁定的值是name
當用戶點擊“查詢/搜索”按鈕時，就把搜索框的內容name存到瀏覽器內存中
sessionStorage.setItem('鍵名', name)  //使用詳見文檔

我的鍵名是根據我的頁面路由名 + 'Stor'來取名的，這個拼接的'Stor'只是我個人用來區分此后綴的鍵名是存什么內容的，可按自己喜好來。

比如路由是carManage 鍵名就是carManageStor

因為不止一個頁面要實現這個效果，在進入頁面時要進行一次取值，拿瀏覽器存儲中的數據：sessionStorage.getItem('鍵名')

為了好看，把獲取的方法寫到method里了，

getDefaultStor(routeName) {
    return sessionStorage.getItem(`${routeName}Stor`)
}

routeName參數的話看你自己的路由名啦，從this.$route里面拿。

 

清除緩存內容：

還有一點是，如果當用戶清除了輸入框的內容，就把值清掉。

我的做法是通過監聽輸入框的name值來判斷為空就清掉：

watch: {
    name(val) {
        if(!val) {
            sessionStorage.removeItem('鍵名')  //鍵名的套路是一樣的
        }      
    }  
}

 

省事點的辦法是直接監聽name的變化，有值就sessionStorage.setItem()，沒值就sessionStorage.removeItem()。

但是我感覺這樣應該比較耗能，就沒用這種偷懶的方式。

大概就是這樣子..