溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
背景
以前js都是 Session 和 Cookie 來存儲信息，仿佛我還停留在那個時候，一問同事有沒有新的solution，才知道現在已經有 HTML5 localStorage 本地存儲 這個東西，可以在瀏覽器端儲存數據。
記得最早的Cookies只能存很小的東西，4KB的樣子，并且安全性很差，在IE6時代一個域名也只能二十個Cookies吧，限制挺大，當然IE還有userData的東西，沒什么用。Flash也帶了一個Storage，相對比較大，空間是Cookie的25倍左右，當時現在也廢棄Flash了。
到了H5時代，就統一了，LocalStorage一統天下。官方建議是每個網站 5MB ，非常大了，雖然瀏覽器設置會有差異，但是一般就存些JSON或者字符串或者緩存來說，足夠了。
HTML5 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對象的屬性還有三個：
!!! 特別注意的是，該事件不在導致數據變化的當前頁面觸發。如果瀏覽器同時打開一個域名下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的數據時，其他所有頁面的storage事件會被觸發，而原始頁面并不觸發storage事件。可以通過這種機制，實現多個窗口之間的通信。所有瀏覽器之中，只有IE瀏覽器除外，它會在所有頁面觸發storage事件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
