溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是如何基于Vue sessionStorage實現保留搜索框搜索內容，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
最近遇到個需求：因為是后臺管理系統，會頻繁切換頁面（路由），再次切換路由就重新加載頁面了，重新輸入條件很繁瑣，需要保留搜索框的內容。（廢話，看不同項目的不同需求吧）
保留搜索框內容：
利用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()。
但是我感覺這樣應該比較耗能，就沒用這種偷懶的方式。
看完這篇關于如何基于Vue sessionStorage實現保留搜索框搜索內容的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
