如何基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容

發(fā)布時間：2020-07-20 14:31:57 來源：億速云閱讀：236 作者：小豬欄目：web開發(fā)

小編這次要給大家分享的是如何基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

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

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

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

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

如何基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容

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

比如路由是carManage 鍵名就是carManageStor

因為不止一個頁面要實現(xiàn)這個效果，在進(jìn)入頁面時要進(jìn)行一次取值，拿瀏覽器存儲中的數(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('鍵名') //鍵名的套路是一樣的
    }   
  } 
}

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

我的做法是通過監(jiān)聽輸入框的name值來判斷為空就清掉：

省事點的辦法是直接監(jiān)聽name的變化，有值就sessionStorage.setItem()，沒值就sessionStorage.removeItem()。

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

看完這篇關(guān)于如何基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

猜你喜歡