解決Vue_localStorage本地存儲和本地取值問題
更新時(shí)間：2024年07月26日 08:55:29 作者：我不是長安
這篇文章主要介紹了解決Vue_localStorage本地存儲和本地取值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue_localStorage本地存儲和本地取值
Vue本地存儲(3種)
① localStorage(長期存儲)
- 存：localStorage.setitem('key',data)
- ?。簂ocalStorage.getitem('key')
② sessionStorage(臨時(shí)存儲)
- 存：sessionStorage.setitem('key',data)
- ?。簊essionStorage.getitem('key')
③ cookie(有時(shí)效性)
共同點(diǎn)
- ①都可以存儲，并且存儲只跟域名走、只存儲在當(dāng)前域名下。
不同點(diǎn)
?存儲大小不同
- ①localStoage/sessionStorage /5M
- ②cookie /4K 有時(shí)效性 如果沒有設(shè)置時(shí)間會話關(guān)閉自動失效
- ③localStorage/不主動刪除，數(shù)據(jù)一直在。
- ④sessionStorage/在瀏覽器打開期間存在，關(guān)閉當(dāng)前會話即清空(刷新不清除)
sessionStorage和localStorage用法基本一致，引用類型的值需要轉(zhuǎn)換成Json，我這里用localstorage來舉例。
Vue存值取值本地存儲
根據(jù)項(xiàng)目需求，也可以使用sessionStorage進(jìn)行存值取值
- 1.存值：sessionStorage.setItem(key,value)
sessionStorage.setItem("username",user.name)- 2.取值：sessionStorage.getItem(key);
sessionStorage.getItem("username")如果直接使用sessionStorage.setItem和sessionStorage.getItem來進(jìn)行存取對象則不能正常使用該對象，并且在Application的SessionStorage中會顯示[object object]
解決方法：轉(zhuǎn)換為json格式進(jìn)行存取
- 1.存值時(shí)轉(zhuǎn)為Json字符串存入，用JSON.stringify()
sessionStorage.setItem('userObj', JSON.stringify(user))- 2.取值轉(zhuǎn)回對象，用JSON.parse()
JSON.parse(sessionStorage.getItem('userObj'))
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟
項(xiàng)目完成，我們會將項(xiàng)目進(jìn)行上線，為了提升性能，我們往往會進(jìn)行一些優(yōu)化處理，本文主要介紹了vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟，感興趣的可以了解一下2021-07-07
今天小編就為大家分享一篇Vue點(diǎn)擊切換顏色的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue是一款流行的前端框架，它提供了一系列的工具和組件，使得開發(fā)者可以更加便捷地創(chuàng)建交互式的Web應(yīng)用程序，輪播圖是Web應(yīng)用程序中常見的一種交互式組件，本文將介紹如何使用Vue和第三方組件庫 Element UI實(shí)現(xiàn)輪播圖功能,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue props用法詳解(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue-router源碼之history類的淺析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue分割面板封裝實(shí)現(xiàn)記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue父子組件間引用之$parent、$children的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Vue實(shí)現(xiàn)Header漸隱漸現(xiàn)效果的實(shí)例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)Header漸隱漸現(xiàn)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
在Vue中使用xlsx組件實(shí)現(xiàn)Excel導(dǎo)出功能的步驟詳解
在現(xiàn)代Web應(yīng)用程序中,數(shù)據(jù)導(dǎo)出到Excel格式是一項(xiàng)常見的需求,Vue.js是一種流行的JavaScript框架,允許我們構(gòu)建動態(tài)的前端應(yīng)用程序,本文將介紹如何使用Vue.js和xlsx組件輕松實(shí)現(xiàn)Excel數(shù)據(jù)導(dǎo)出功能,需要的朋友可以參考下2023-10-10
vue項(xiàng)目網(wǎng)站全局置灰功能實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue項(xiàng)目網(wǎng)站全局置灰功能實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12