本篇內(nèi)容介紹了“JavaScript如何使用localStorage存儲(chǔ)數(shù)據(jù)”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

10年積累的網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有涿鹿免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

背景

以前js都是 Session和 Cookie來存儲(chǔ)信息，仿佛我還停留在那個(gè)時(shí)候，一問同事有沒有新的solution，才知道現(xiàn)在已經(jīng)有 HTML5 localStorage本地存儲(chǔ) 這個(gè)東西，可以在瀏覽器端儲(chǔ)存數(shù)據(jù)。

記得最早的Cookies只能存很小的東西，4KB的樣子，并且安全性很差，在IE6時(shí)代一個(gè)域名也只能二十個(gè)Cookies吧，限制挺大，當(dāng)然IE還有userData的東西，沒什么用。Flash也帶了一個(gè)Storage，相對(duì)比較大，空間是Cookie的25倍左右，當(dāng)時(shí)現(xiàn)在也廢棄Flash了。

到了H5時(shí)代，就統(tǒng)一了，LocalStorage一統(tǒng)天下。官方建議是每個(gè)網(wǎng)站 5MB，非常大了，雖然瀏覽器設(shè)置會(huì)有差異，但是一般就存些JSON或者字符串或者緩存來說，足夠了。

HTML5 LocalStorage 本地存儲(chǔ)

• sessionStorage：保存的數(shù)據(jù)用于瀏覽器的一次會(huì)話，當(dāng)會(huì)話結(jié)束（通常是該窗口關(guān)閉），數(shù)據(jù)被清空；

• localStorage：保存的數(shù)據(jù)長期存在，下一次訪問該網(wǎng)站的時(shí)候，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。除了保存期限的長短不同，這兩個(gè)對(duì)象的屬性和方法完全一樣。

它們很像cookie機(jī)制的強(qiáng)化版，雖然能夠動(dòng)用大得多的存儲(chǔ)空間。但是，與cookie一樣，它們也受同域限制。某個(gè)網(wǎng)頁存入的數(shù)據(jù)，只有同域下的網(wǎng)頁才能讀取。

通過檢查window對(duì)象是否包含 sessionStorage 和 localStorage 屬性，可以確定瀏覽器是否支持這兩個(gè)對(duì)象。

function checkStorageSupport()
{
 // sessionStorage
 if (window.sessionStorage) {
  return true;
 } else {
  return false;
 }
 
 // localStorage
 if (window.localStorage) {
  return true;
 } else {
  return false;
 }
}

Storage 操作

sessionStorage 和 localStorage 保存的數(shù)據(jù)，都以 “Key-Value鍵值對(duì)”的形式存在。也就是說，每一項(xiàng)數(shù)據(jù)都有一個(gè)鍵名和對(duì)應(yīng)的值。所有的數(shù)據(jù)都是以文本格式保存。

//sessionStorage 操作
sessionStorage.setItem("key","value");     // setItem方法，存儲(chǔ)變量名為key，值為value的變量
var valueSession = sessionStorage.getItem("key");  // getItem方法，讀取存儲(chǔ)變量名為key的值
sessionStorage.removeItem('key');      // removeItem方法，刪除變量名為key的存儲(chǔ)變量
sessionStorage.clear();        // clear方法，清除所有保存數(shù)據(jù)
//localStorage 操作
localStorage.setItem("key","value");     // 存儲(chǔ)變量名為key，值為value的變量
localStorage.key = "value"        // 同setItem方法，存儲(chǔ)數(shù)據(jù)
var valueLocal = localStorage.getItem("key");   // 讀取存儲(chǔ)變量名為key的值
var valueLocal = localStorage.key;      // 同getItem，讀取數(shù)據(jù)
localStorage.removeItem('key');      // removeItem方法，刪除變量名為key的存儲(chǔ)變量
localStorage.clear();         // clear方法，清除所有保存的數(shù)據(jù)

// 利用length屬性和key方法，遍歷所有的數(shù)據(jù)
for(var i = 0; i < localStorage.length; i++)
{
 console.log(localStorage.key(i));
}

// 存儲(chǔ) localStorage 數(shù)據(jù)為 Json 格式
value = JSON.stringify(jsonValue);      // 將 JSON 對(duì)象 jsonValue 轉(zhuǎn)化成字符串
localStorage.setItem("key", value);     // 用 localStorage 保存轉(zhuǎn)化好的的字符串

// 讀取 localStorage 中 Json 格式數(shù)據(jù)
var value = localStorage.getItem("key");    // 取回 value 變量
jsonValue = JSON.parse(value);      // 把字符串轉(zhuǎn)換成 JSON 對(duì)象

Storage 事件

當(dāng)儲(chǔ)存的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)觸發(fā) storage 事件。我們可以指定這個(gè)事件的回調(diào)函數(shù)。

window.addEventListener("storage",onStorageChange);

回調(diào)函數(shù)接受一個(gè)event對(duì)象作為參數(shù)。這個(gè)event對(duì)象的key屬性，保存發(fā)生變化的鍵名。

function onStorageChange(e)
{
  console.log(e.key); 
}

除了key屬性，event對(duì)象的屬性還有三個(gè)：

• oldValue：更新前的值。如果該鍵為新增加，則這個(gè)屬性為null。

• newValue：更新后的值。如果該鍵被刪除，則這個(gè)屬性為null。

• url：原始觸發(fā)storage事件的那個(gè)網(wǎng)頁的網(wǎng)址。

特別注意的是，該事件不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁面觸發(fā)。如果瀏覽器同時(shí)打開一個(gè)域名下面的多個(gè)頁面，當(dāng)其中的一個(gè)頁面改變sessionStorage或localStorage的數(shù)據(jù)時(shí)，其他所有頁面的storage事件會(huì)被觸發(fā)，而原始頁面并不觸發(fā)storage事件。可以通過這種機(jī)制，實(shí)現(xiàn)多個(gè)窗口之間的通信。所有瀏覽器之中，只有IE瀏覽器除外，它會(huì)在所有頁面觸發(fā)storage事件。

擴(kuò)展知識(shí)

1、localStorage和sessionStorage是HTML5 Web存儲(chǔ)的提供的兩種存儲(chǔ)方式，在IE7以上以及大多數(shù)瀏覽器都是支持的

2、localStorage和sessionStorage的區(qū)別：

(1)、localStorage和sessionStorage一樣都是用來存儲(chǔ)客戶端臨時(shí)信息的對(duì)象。

(2)、他們都是只能存儲(chǔ)字符串類型的對(duì)象（雖然規(guī)范中可以存儲(chǔ)其他原生類型的對(duì)象，但是目前為止沒有瀏覽器對(duì)其進(jìn)行實(shí)現(xiàn)）。

(3)、localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠(yuǎn)存在。（記錄在內(nèi)存中的）

sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁，一旦窗口或標(biāo)簽頁被關(guān)閉了，那么所有通過sessionStorage存儲(chǔ)的數(shù)據(jù)也就被清空了（回話性質(zhì)的儲(chǔ)存）

(4)、不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬于相同域名和端口），但是不同頁面或標(biāo)簽頁間無法共享sessionStorage的信息。

這里需要注意的是，頁面及標(biāo)簽頁僅指頂級(jí)窗口，如果一個(gè)標(biāo)簽頁包含多個(gè)iframe標(biāo)簽且他們屬于同源頁面，那么他們之間是可以共享sessionStorage的。（同源原則）

3、localStorage和sessionStorage可存儲(chǔ)數(shù)據(jù)的大小一般為5MB

“JavaScript如何使用localStorage存儲(chǔ)數(shù)據(jù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！