基于Vue sessionStorage實(shí)現(xiàn)保留搜索框搜索內(nèi)容
最近遇到個(gè)需求：因?yàn)槭呛笈_(tái)管理系統(tǒng)，會(huì)頻繁切換頁(yè)面（路由），再次切換路由就重新加載頁(yè)面了，重新輸入條件很繁瑣，需要保留搜索框的內(nèi)容。（廢話(huà)，看不同項(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('鍵名')
為了好看，把獲取的方法寫(xiě)到method里了，
getDefaultStor(routeName) {
return sessionStorage.getItem(`${routeName}Stor`)
}
routeName參數(shù)的話(huà)看你自己的路由名啦，從this.$route里面拿。
清除緩存內(nèi)容：
watch: {
name(val) {
if(!val) {
sessionStorage.removeItem('鍵名') //鍵名的套路是一樣的
}
}
}
還有一點(diǎn)是，如果當(dāng)用戶(hù)清除了輸入框的內(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)簡(jiǎn)易翻頁(yè)效果源碼分享
本文給大家分享了vue實(shí)現(xiàn)簡(jiǎn)易翻頁(yè)效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
這篇文章主要介紹了Vue-cli配置打包文件本地使用的教程圖解,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
餓了么UI中el-tree樹(shù)節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性)
最近新做的項(xiàng)目有用到Element-UI tree組件,下面這篇文章主要給大家介紹了關(guān)于餓了么UI中el-tree樹(shù)節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
淺談Vue.nextTick 的實(shí)現(xiàn)方法
本篇文章主要介紹了Vue.nextTick 的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解
這篇文章主要為大家介紹了VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
今天小編就為大家分享一篇關(guān)于實(shí)例講解v-if和v-show的區(qū)別，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Vite中使用Ant?Design?Vue3.x框架教程示例
這篇文章主要為大家介紹了Vite中使用Ant?Design?Vue3.x框架教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了Vue的編碼技巧與規(guī)范使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue-router 切換組件頁(yè)面時(shí)進(jìn)入進(jìn)出動(dòng)畫(huà)方法
今天小編就為大家分享一篇Vue-router 切換組件頁(yè)面時(shí)進(jìn)入進(jìn)出動(dòng)畫(huà)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
elementUI下拉框?qū)崿F(xiàn)隱藏時(shí)觸發(fā)相關(guān)事件方式
這篇文章主要介紹了elementUI下拉框?qū)崿F(xiàn)隱藏時(shí)觸發(fā)相關(guān)事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10