簡(jiǎn)介

什么是localStrage

localStorage （本地存儲(chǔ)）是一種在用戶瀏覽器中存儲(chǔ)數(shù)據(jù)的客戶端存儲(chǔ)方式，允許網(wǎng)站將鍵值對(duì)數(shù)據(jù)持久保存在用戶的本地瀏覽器中。

存儲(chǔ)的數(shù)據(jù)不受瀏覽器關(guān)閉的影響，可以在不同會(huì)話和瀏覽器關(guān)閉后仍然保持有效。

• 生命周期永久有效，除非手動(dòng)刪除，否則關(guān)閉頁面也會(huì)存在
• 可以多窗口（頁面）共享（同一瀏覽器可以共享）
• 以鍵值對(duì)的形式存儲(chǔ)使用
• 各瀏覽器支持的localStorage容量上限不同；一般上限為5MB
• localStorage.getItem(‘key’); 如果key不存在則返回null，而不是 undefined

例：

標(biāo)準(zhǔn)的json對(duì)象{“name”:“john”}

//設(shè)置localStorage保存到本地，第一個(gè)為變量名，第二個(gè)是值
localStorage.setItem('username', '安琪拉')

// 獲取數(shù)據(jù)
localStorage.getItem('username')

// 刪除保存的數(shù)據(jù)
localStorage.removeItem('username')

// 清除所有保存的數(shù)據(jù)
localStorage.clear()

什么是sessionStrage

sessionStorage 是一種在用戶瀏覽器中臨時(shí)存儲(chǔ)數(shù)據(jù)的客戶端存儲(chǔ)方式，適用于同一瀏覽器窗口或標(biāo)簽的會(huì)話期間。

存儲(chǔ)的數(shù)據(jù)在用戶關(guān)閉瀏覽器窗口或標(biāo)簽時(shí)會(huì)被清除，因此適用于保存會(huì)話相關(guān)的臨時(shí)信息，例如用戶登錄狀態(tài)、暫時(shí)的用戶選項(xiàng)等。

注：

• 【只在本地存儲(chǔ)】：seesionStorage的數(shù)據(jù)不會(huì)跟隨HTTP請(qǐng)求一起發(fā)送到服務(wù)器，只會(huì)在本地生效，并在關(guān)閉標(biāo)簽頁后清除數(shù)據(jù)。
• 【存儲(chǔ)方式】：seesionStorage的存儲(chǔ)方式采用key、value的方式。value的值必須為字符串類型。
• 【存儲(chǔ)上限限制】：不同的瀏覽器存儲(chǔ)的上限也不一樣，但大多數(shù)瀏覽器把上限限制在5MB以下

// 設(shè)置sessionStorage保存到本地，第一個(gè)為變量名，第二個(gè)是值
sessionStorage.setItem('sessionName', '可樂')

// 獲取數(shù)據(jù)
sessionStorage.getItem('sessionName')

// 刪除保存的數(shù)據(jù)
sessionStorage.removeItem('sessionName')

// 清除所有保存的數(shù)據(jù)
sessionStorage.clear()

什么是Vuex

Vuex 是一個(gè)用于 Vue.js 應(yīng)用程序的狀態(tài)管理模式和庫。

它專門用于管理應(yīng)用程序中的狀態(tài)（數(shù)據(jù)），使得不同組件之間可以共享和交流數(shù)據(jù)，而無需通過傳遞 props 或事件來傳遞數(shù)據(jù)。

注：詳細(xì)介紹見：Vuex的原理和使用方法

擴(kuò)展

• JSON.stringify(); // 將json格式的數(shù)據(jù)（JavaScript 對(duì)象）轉(zhuǎn)換成JSON格式的字符串
• JSON.parse(); //將JSON格式的字符串轉(zhuǎn)換成JSON對(duì)象進(jìn)行處理

三者區(qū)別

主要區(qū)別

• localStorage：是通過本地?cái)?shù)據(jù)存儲(chǔ)的，以文件的方式存儲(chǔ)在本地；
• sessionStorage：只是本地存儲(chǔ)一個(gè)會(huì)話中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后也隨之銷毀；
• Vuex：是一個(gè)全局狀態(tài)數(shù)據(jù)管理，存儲(chǔ)在內(nèi)存中，沒有內(nèi)存大小限制；是專門為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式；通過采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)。

應(yīng)用場(chǎng)景

• localStorage：一般用于跨頁面?zhèn)鬟f數(shù)據(jù)場(chǎng)景；長(zhǎng)期性保存的數(shù)據(jù)；
• sessionStorage：適用于單頁應(yīng)用程序，方便再各業(yè)務(wù)模塊進(jìn)行傳值；也用于敏感賬號(hào)的一次性登錄，關(guān)閉當(dāng)時(shí)頁面再次打開時(shí)會(huì)需要重新登錄
• Vuex：是專門為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式；用于組件之間傳值

存儲(chǔ)永久性

• localStorage窗口或?yàn)g覽器關(guān)閉也始終有效；
• sessionStorage僅在當(dāng)前瀏覽器關(guān)閉前有效；
• vuex在刷新頁面時(shí)存儲(chǔ)的值就會(huì)丟失

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論