解決Vue_localStorage本地存儲和本地取值問題
更新時間：2024年07月26日 08:55:29 作者：我不是長安
這篇文章主要介紹了解決Vue_localStorage本地存儲和本地取值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue_localStorage本地存儲和本地取值
Vue本地存儲(3種)
① localStorage(長期存儲)
- 存：localStorage.setitem('key',data)
- ?。簂ocalStorage.getitem('key')
② sessionStorage(臨時存儲)
- 存：sessionStorage.setitem('key',data)
- ?。簊essionStorage.getitem('key')
③ cookie(有時效性)
共同點
- ①都可以存儲，并且存儲只跟域名走、只存儲在當前域名下。
不同點
?存儲大小不同
- ①localStoage/sessionStorage /5M
- ②cookie /4K 有時效性 如果沒有設置時間會話關閉自動失效
- ③localStorage/不主動刪除，數(shù)據(jù)一直在。
- ④sessionStorage/在瀏覽器打開期間存在，關閉當前會話即清空(刷新不清除)
sessionStorage和localStorage用法基本一致，引用類型的值需要轉換成Json，我這里用localstorage來舉例。
Vue存值取值本地存儲
根據(jù)項目需求，也可以使用sessionStorage進行存值取值
- 1.存值：sessionStorage.setItem(key,value)
sessionStorage.setItem("username",user.name)- 2.取值：sessionStorage.getItem(key);
sessionStorage.getItem("username")如果直接使用sessionStorage.setItem和sessionStorage.getItem來進行存取對象則不能正常使用該對象，并且在Application的SessionStorage中會顯示[object object]
解決方法：轉換為json格式進行存取
- 1.存值時轉為Json字符串存入，用JSON.stringify()
sessionStorage.setItem('userObj', JSON.stringify(user))- 2.取值轉回對象，用JSON.parse()
JSON.parse(sessionStorage.getItem('userObj'))
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
vue中使用vue-pdf組件實現(xiàn)文件預覽及相應報錯解決
在需求中,經(jīng)常遇見pdf的在線預覽效果,很多pdf插件不支持vue3,或者是沒有集成翻頁放大縮小功能,比如vue-pdf,下面這篇文章主要給大家介紹了關于vue中使用vue-pdf組件實現(xiàn)文件預覽及相應報錯解決的相關資料,需要的朋友可以參考下2022-09-09
很多朋友在使用vue3+echarts5技術時會遇到echarts無法綻放的問題，今天小編就給大家分享下問題描述及解決方案，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue3生命周期原理與生命周期函數(shù)簡單應用實例分析
這篇文章主要介紹了vue3生命周期原理與生命周期函數(shù),結合簡單實例形式分析了vue3的生命周期基本原理、以及各個階段的生命周期鉤子函數(shù)功能、使用技巧與相關注意事項,需要的朋友可以參考下2023-04-04
淺析Vue中Virtual?DOM和Diff原理及實現(xiàn)
這篇文章主要為大家詳細介紹了Vue中Virtual?DOM和Diff原理及實現(xiàn)的相關知識，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-03-03
下面小編就為大家分享一篇iview日期控件,雙向綁定日期格式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
最近項目要用到百度地圖api,好久沒用到地圖,就百度了一番,下面這篇文章主要給大家介紹了關于vue3中使用百度地圖的簡單步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
今天小編就為大家分享一篇vuex actions傳遞多參數(shù)的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue導入excel文件的兩種方式(form表單和el-upload)
最近開發(fā)遇到一個點擊導入按鈕讓excel文件數(shù)據(jù)導入的需求,下面這篇文章主要給大家介紹了關于Vue導入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下2022-11-11
el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題解決
這篇文章主要給大家介紹了關于el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題的解決過程,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細,需要的朋友可以參考下2024-01-01