js操作localstorage

localstorage是web前端常用的本地存儲服務(wù)，它相對于cookie

有幾個優(yōu)勢：

• ①數(shù)據(jù)存儲量大
• ②不會攜帶給后臺，避免傳輸沒用的數(shù)據(jù)
• ③操作簡便

1、首先封裝一個全局方法

以便各個地方調(diào)用

export function handleLocalStorage(method, key, value) {
? switch (method) {
? ? case 'get' : {
? ? ? let temp = window.localStorage.getItem(key);
? ? ? if (temp) {
? ? ? ? return temp
? ? ? } else {
? ? ? ? return false
? ? ? }
? ? }
? ? case 'set' : {
? ? ? window.localStorage.setItem(key, value);
? ? ? break
? ? }
? ? case 'remove': {
? ? ? window.localStorage.removeItem(key);
? ? ? break
? ? }
? ? default : {
? ? ? return false
? ? }
? }
}

2、調(diào)用方法

• ①存儲

handleLocalStorage('set', 'userName', 'Tom');

• ②獲取

handleLocalStorage('get', 'userName');

• ③刪除

handleLocalStorage('remove', 'userName');

 js localstorage(本地存儲）必知

HTML API

localstorage 在瀏覽器的 API 有兩個：localStorage 和sessionStorage，存在于 window 對象中：localStorage 對應(yīng) window.localStorage，sessionStorage 對應(yīng)window.sessionStorage。

localStorage 和 sessionStorage 的區(qū)別主要是在于其生存期。

基本用法

localStorage只要在相同的協(xié)議、相同的主機(jī)名、相同的端口下，就能讀取/修改到同一份localStorage數(shù)據(jù)。

sessionStorage比localStorage更嚴(yán)苛一點，除了協(xié)議、主機(jī)名、端口外，還要求在同一窗口（也就是瀏覽器的標(biāo)簽頁）下。

生存期

localStorage理論上來說是永久有效的，即不主動清空的話就不會消失，即使保存的數(shù)據(jù)超出了瀏覽器所規(guī)定的大小，也不會把舊數(shù)據(jù)清空而只會報錯。但需要注意的是，在移動設(shè)備上的瀏覽器或各Native App用到的WebView里，localStorage都是不可靠的，可能會因為各種原因（比如說退出App、網(wǎng)絡(luò)切換、內(nèi)存不足等原因）被清空。

sessionStorage的生存期顧名思義，類似于session，只要關(guān)閉瀏覽器（也包括瀏覽器的標(biāo)簽頁），就會被清空。由于sessionStorage的生存期太短，因此應(yīng)用場景很有限，但從另一方面來看，不容易出現(xiàn)異常情況，比較可靠。

數(shù)據(jù)結(jié)構(gòu)

localstorage為標(biāo)準(zhǔn)的鍵值對（Key-Value,簡稱KV）數(shù)據(jù)類型，簡單但也易擴(kuò)展，只要以某種編碼方式把想要存儲進(jìn)localstorage的對象給轉(zhuǎn)化成字符串，就能輕松支持。

舉點例子：把對象轉(zhuǎn)換成json字符串，就能讓存儲對象了；把圖片轉(zhuǎn)換成DataUrl（base64），就可以存儲圖片了。另外對于鍵值對數(shù)據(jù)類型來說，"鍵是唯一的"這個特性也是相當(dāng)重要的，重復(fù)以同一個鍵來賦值的話，會覆蓋上次的值。

容量限制

目前業(yè)界基本上統(tǒng)一為5M，已經(jīng)比cookies的4K要大很多了

域名限制

由于瀏覽器的安全策略，localstorage是無法跨域的，也無法讓子域名繼承父域名的localstorage數(shù)據(jù)，這點跟cookies的差別還是蠻大的。

異常處理

localstorage在目前的瀏覽器環(huán)境來說，還不是完全穩(wěn)定的，可能會出現(xiàn)各種各樣的bug，一定要考慮好異常處理。

我個人認(rèn)為localstorage只是資源本地化的一種優(yōu)化手段，不能因為使用localstorage就降低了程序的可用性，那種只是在console里輸出點錯誤信息的異常處理我是絕對反對的。

localstorage的異常處理一般用try/catch來捕獲/處理異常。

JavaScript 存儲對象

存儲對象方法

• key(n) 返回存儲對象中第 n 個鍵的名稱
• getItem(keyname) 返回指定鍵的值
• setItem(keyname, value) 添加鍵和值，如果對應(yīng)的值存在，則更新該鍵對應(yīng)的值。
• removeItem(keyname) 移除鍵
• clear() 清除存儲對象中所有的鍵

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

最新評論