最近遇到個(gè)需求：因?yàn)槭呛笈_(tái)管理系統(tǒng)，會(huì)頻繁切換頁(yè)面（路由），再次切換路由就重新加載頁(yè)面了，重新輸入條件很繁瑣，需要保留搜索框的內(nèi)容。（廢話，看不同項(xiàng)目的不同需求吧）

保留搜索框內(nèi)容：

利用sessionStorage來(lái)保存每次搜索框的內(nèi)容。

后臺(tái)管理系統(tǒng)的搜索欄除了篩選條件肯定還會(huì)有搜索按鈕吧

我的鍵名是根據(jù)我的頁(yè)面路由名 + ’Stor’來(lái)取名的，這個(gè)拼接的’Stor’只是我個(gè)人用來(lái)區(qū)分此后綴的鍵名是存什么內(nèi)容的，可按自己喜好來(lái)。

比如路由是carManage 鍵名就是carManageStor

因?yàn)椴恢挂粋€(gè)頁(yè)面要實(shí)現(xiàn)這個(gè)效果，在進(jìn)入頁(yè)面時(shí)要進(jìn)行一次取值，拿瀏覽器存儲(chǔ)中的數(shù)據(jù)：sessionStorage.getItem(’鍵名’)

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

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

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

清除緩存內(nèi)容：

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

還有一點(diǎn)是，如果當(dāng)用戶清除了輸入框的內(nèi)容，就把值清掉。

我的做法是通過(guò)監(jiān)聽(tīng)輸入框的name值來(lái)判斷為空就清掉：

省事點(diǎn)的辦法是直接監(jiān)聽(tīng)name的變化，有值就sessionStorage.setItem()，沒(méi)值就sessionStorage.removeItem()。

但是我感覺(jué)這樣應(yīng)該比較耗能，就沒(méi)用這種偷懶的方式。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。