簡介

什么是localStrage

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

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

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

例：

標準的json對象{“name”:“john”}

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

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

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

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

什么是sessionStrage

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

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

注：

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

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

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

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

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

什么是Vuex

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

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

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

擴展

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

三者區(qū)別

主要區(qū)別

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

應(yīng)用場景

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

存儲永久性

• localStorage窗口或瀏覽器關(guān)閉也始終有效；
• sessionStorage僅在當前瀏覽器關(guān)閉前有效；
• vuex在刷新頁面時存儲的值就會丟失

總結(jié)

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

最新評論