基於Vue sessionStorage實現保留搜尋框搜尋內容
阿新 • • 發佈:2020-06-02
最近遇到個需求:因為是後臺管理系統,會頻繁切換頁面(路由),再次切換路由就重新載入頁面了,重新輸入條件很繁瑣,需要保留搜尋框的內容。(廢話,看不同專案的不同需求吧)
保留搜尋框內容:
利用sessionStorage來儲存每次搜尋框的內容。
後臺管理系統的搜尋欄除了篩選條件肯定還會有搜尋按鈕吧
我的鍵名是根據我的頁面路由名 + 'Stor'來取名的,這個拼接的'Stor'只是我個人用來區分此後綴的鍵名是存什麼內容的,可按自己喜好來。
比如路由是carManage 鍵名就是carManageStor
因為不止一個頁面要實現這個效果,在進入頁面時要進行一次取值,拿瀏覽器儲存中的資料:sessionStorage.getItem('鍵名')
為了好看,把獲取的方法寫到method裡了,
getDefaultStor(routeName) { return sessionStorage.getItem(`${routeName}Stor`) }
routeName引數的話看你自己的路由名啦,從this.$route裡面拿。
清除快取內容:
watch: { name(val) { if(!val) { sessionStorage.removeItem('鍵名') //鍵名的套路是一樣的 } } }
還有一點是,如果當用戶清除了輸入框的內容,就把值清掉。
我的做法是通過監聽輸入框的name值來判斷為空就清掉:
省事點的辦法是直接監聽name的變化,有值就sessionStorage.setItem(),沒值就sessionStorage.removeItem()。
但是我感覺這樣應該比較耗能,就沒用這種偷懶的方式。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。