本篇內容介紹了“JavaScript如何使用localStorage存儲數據”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

10年積累的網站建設、網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有涿鹿免費網站建設讓你可以放心的選擇與我們合作。

背景

以前js都是 Session和 Cookie來存儲信息，仿佛我還停留在那個時候，一問同事有沒有新的solution，才知道現在已經有 HTML5 localStorage本地存儲 這個東西，可以在瀏覽器端儲存數據。

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

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

HTML5 LocalStorage 本地存儲

• sessionStorage：保存的數據用于瀏覽器的一次會話，當會話結束（通常是該窗口關閉），數據被清空；

• localStorage：保存的數據長期存在，下一次訪問該網站的時候，網頁可以直接讀取以前保存的數據。除了保存期限的長短不同，這兩個對象的屬性和方法完全一樣。

它們很像cookie機制的強化版，雖然能夠動用大得多的存儲空間。但是，與cookie一樣，它們也受同域限制。某個網頁存入的數據，只有同域下的網頁才能讀取。

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

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

Storage 操作

sessionStorage 和 localStorage 保存的數據，都以 “Key-Value鍵值對”的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。所有的數據都是以文本格式保存。

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

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

// 存儲 localStorage 數據為 Json 格式
value = JSON.stringify(jsonValue);      // 將 JSON 對象 jsonValue 轉化成字符串
localStorage.setItem("key", value);     // 用 localStorage 保存轉化好的的字符串

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

Storage 事件

當儲存的數據發生變化時，會觸發 storage 事件。我們可以指定這個事件的回調函數。

window.addEventListener("storage",onStorageChange);

回調函數接受一個event對象作為參數。這個event對象的key屬性，保存發生變化的鍵名。

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

除了key屬性，event對象的屬性還有三個：

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

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

• url：原始觸發storage事件的那個網頁的網址。

特別注意的是，該事件不在導致數據變化的當前頁面觸發。如果瀏覽器同時打開一個域名下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的數據時，其他所有頁面的storage事件會被觸發，而原始頁面并不觸發storage事件。可以通過這種機制，實現多個窗口之間的通信。所有瀏覽器之中，只有IE瀏覽器除外，它會在所有頁面觸發storage事件。

擴展知識

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

2、localStorage和sessionStorage的區別：

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

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

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

sessionStorage生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被關閉了，那么所有通過sessionStorage存儲的數據也就被清空了（回話性質的儲存）

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

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

3、localStorage和sessionStorage可存儲數據的大小一般為5MB

“JavaScript如何使用localStorage存儲數據”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

新聞名稱：JavaScript如何使用localStorage存儲數據
網頁網址：http://vcdvsql.cn/article46/gjigeg.html

成都網站建設公司_創新互聯，為您提供面包屑導航、服務器托管、網站內鏈、電子商務、響應式網站、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯