基于Vue sessionStorage實(shí)現(xiàn)保留搜索框搜索內(nèi)容
最近遇到個(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('鍵名')
為了好看，把獲取的方法寫(xiě)到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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了用vue快速開(kāi)發(fā)app的腳手架工具，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06- 這篇文章主要給大家總結(jié)介紹了關(guān)于vue中八種組件通信方式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了淺談vuex actions和mutation的異曲同工 ，詳細(xì)的介紹了actions和mutation的使用和區(qū)別，非常具有實(shí)用價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了VUE前端cookie簡(jiǎn)單操作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Vue 中 template 有且只能一個(gè) root的原因解析(源碼分析)
這篇文章主要介紹了Vue 中 template 有且只能一個(gè) root的原因解析,本文從源碼角度分析給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue使用axios上傳文件(FormData)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue2封裝input組件方式(輸入的雙向綁定)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
這篇文章主要介紹了在vue 中使用 less 的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
Vue Element前端應(yīng)用開(kāi)發(fā)之表格列表展示
在我們一般開(kāi)發(fā)的系統(tǒng)界面里面，列表頁(yè)面是一個(gè)非常重要的綜合展示界面，包括有條件查詢、列表展示和分頁(yè)處理，以及對(duì)每項(xiàng)列表內(nèi)容可能進(jìn)行的轉(zhuǎn)義處理，本篇隨筆介紹基于Vue +Element基礎(chǔ)上實(shí)現(xiàn)表格列表頁(yè)面的查詢，列表展示和字段轉(zhuǎn)義處理。2021-05-05
詳解Vue如何將多個(gè)空格被合并顯示成一個(gè)空格
這篇文章主要為大家詳細(xì)介紹了在Vue中如何將多個(gè)空格被合并顯示成一個(gè)空格,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04