詳解vue中l(wèi)ocalStorage的使用方法
什么是localStorage
對瀏覽器來說，使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀，而且容量更大，它包含兩種：localStorage 和 sessionStorage
1.sessionStorage（臨時存儲） ：為每一個數(shù)據(jù)源維持一個存儲區(qū)域，在瀏覽器打開期間存在，包括頁面重新加載
2.localStorage（長期存儲） ：與 sessionStorage 一樣，但是瀏覽器關(guān)閉后，數(shù)據(jù)依然會一直存在
所以上次使用cookie的時候就遇到了一個坑,設(shè)置后馬上訪問session會獲取不到,蛋疼,還需要刷新一下,原因是:
當(dāng)我們首次訪問設(shè)置Cookie的頁面時，服務(wù)器會把設(shè)置的Cookie值通過響應(yīng)頭發(fā)送過來，告訴瀏覽器將cookie存儲的本地相應(yīng)文件夾中（注意:第一次訪問時本地還沒有存儲Cookie,所以此時獲取不到值）;
當(dāng)?shù)诙卧L問(或在進(jìn)行cookie設(shè)置后,過期前所有的訪問)時，請求頭信息你中都會把Cookie值攜帶。(百度到的,暫時還沒理解透徹,先搬過來).
vue中實(shí)現(xiàn)本地儲存的方法：localStorage，在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中l(wèi)ocalStorage會有所不同。
(1).儲存數(shù)據(jù)
localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken)
(2).取出數(shù)據(jù)
localStorage.getItem('accessToken')
(3).刪除儲存數(shù)據(jù)
localStorage.removeItem('accessToken')
(4).更改數(shù)據(jù)
localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken)
使用時有兩點(diǎn)需要注意過的地方：
. localStorage在瀏覽器的隱私模式下面是不可讀取的。
. localStorage本質(zhì)上是對字符串的讀取，有json格式時需要JSON.stringify()轉(zhuǎn)化為字符串。
. localStorage不能被爬蟲抓取到
注意點(diǎn)
- localStorage有效期是永久的。一般的瀏覽器能存儲的是5MB左右。sessionStorage api與localStorage相同。
- sessionStorage默認(rèn)的有效期是瀏覽器的會話時間（也就是說標(biāo)簽頁關(guān)閉后就消失了）。
- localStorage作用域是協(xié)議、主機(jī)名、端口。（理論上，不人為的刪除，一直存在設(shè)備中）
- sessionStorage作用域是窗口、協(xié)議、主機(jī)名、端口。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
- 教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能
- VUE使用localstorage和sessionstorage實(shí)現(xiàn)登錄示例詳解
- vue如何使用cookie、localStorage和sessionStorage進(jìn)行儲存數(shù)據(jù)
- vue使用localStorage保存登錄信息 適用于移動端、PC端
- Vue使用localStorage存儲數(shù)據(jù)的方法
- Vue項(xiàng)目使用localStorage+Vuex保存用戶登錄信息
- 詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
- vue中的localStorage使用方法詳解
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表固定列滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vue3 Echarts通用的折線圖帶陰影效果實(shí)現(xiàn)
在環(huán)保倉管項(xiàng)目中,做了一個每月對藥品、消耗品、設(shè)備的進(jìn)出,進(jìn)行統(tǒng)計(jì)百分比,效果好看,后面經(jīng)常在用這個樣式,下面通過示例代碼分享Vue3 Echarts通用的折線圖帶陰影效果實(shí)現(xiàn),感興趣的朋友一起看看吧2024-07-07
眾所周知，一個項(xiàng)目在開發(fā)、測試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過指令vue create xxx創(chuàng)建的項(xiàng)目取消了默認(rèn)的 config 和 build 文件夾，這導(dǎo)致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量，不過官方也提供了相應(yīng)的配置方法，本文就來介紹一下2021-08-08
在 Vue 中,插槽（Slot）是一種非常強(qiáng)大且靈活的機(jī)制,用于在組件中插入內(nèi)容,默認(rèn)插槽是在父組件中傳遞內(nèi)容給子組件時使用的一種方式,這篇文章主要介紹了Vue中的默認(rèn)插槽詳解,需要的朋友可以參考下2024-01-01
vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，本文通過實(shí)例給大家介紹了vue入門教程適用小白初學(xué)者，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
前端vue3手動設(shè)置滾動條位置/自動定位詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于前端vue3手動設(shè)置滾動條位置/自動定位的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)學(xué)習(xí)或者使用vue3具有一定的參考解決價值,需要的朋友可以參考下2024-05-05
Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示)
這篇文章主要介紹了Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3新擬態(tài)組件庫開發(fā)流程之table組件源碼分析
這篇文章主要介紹了vue3新擬態(tài)組件庫開發(fā)流程——table組件源碼,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了解決Vue router-link綁定事件不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue ECharts直角坐標(biāo)系配置詳細(xì)講解
數(shù)據(jù)的重要性我們大家都知道，就算再小的項(xiàng)目中都可能使用幾個圖表展示，我最近在做項(xiàng)目的過程中也是需要用到圖表，最后選擇了echarts圖表庫2022-12-12