前面的話

　　Web存儲最初作為HTML5的一部分被定義成API形式，但是后來被剝離出來作為獨立的一份標(biāo)準(zhǔn)了。Web存儲標(biāo)準(zhǔn)所描述的API包含localStorage對象和sessionStorage對象，這兩個對象實際上是持久化關(guān)聯(lián)數(shù)組，是名值對的映射表，“名”和“值”都是字符串。Web存儲易于使用、支持大容量(但非無限量)數(shù)據(jù)存儲同時兼容當(dāng)前所有主流瀏覽器。本文將詳細(xì)介紹Web Storage

 

概述

　　Web Storage的目的是克服由cookie帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時，無須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。Web Storage的兩個主要目標(biāo)是：提供一種在cookie之外存儲會話數(shù)據(jù)的途徑以及提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機制

　　Web Storage分成兩類：sessionStorage和localStorage。sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會話，當(dāng)會話結(jié)束(通常是該窗口關(guān)閉)，數(shù)據(jù)被清空；localStorage保存的數(shù)據(jù)長期存在，下一次訪問該網(wǎng)站的時候，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。除了保存期限的長短不同，這兩個對象的屬性和方法完全一樣

　　它們很像cookie機制的強化版，能夠動用大得多的存儲空間。目前，每個域名的存儲上限視瀏覽器而定，Chrome是2.5MB，F(xiàn)irefox和Opera是5MB，IE是10MB。其中，F(xiàn)irefox的存儲空間由一級域名決定，而其他瀏覽器沒有這個限制。也就是說，在Firefox中，a.example.com和b.example.com共享5MB的存儲空間。另外，與Cookie一樣，它們也受同域限制。某個網(wǎng)頁存入的數(shù)據(jù)，只有同域下的網(wǎng)頁才能讀取

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

　　[注意]IE瀏覽器不支持在本地使用storage

 

存取數(shù)據(jù)

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

　　[注意]Storage類型只能存儲字符串。非字符串的數(shù)據(jù)在存儲之前會被轉(zhuǎn)換成字符串

【setItem()】

　　存入數(shù)據(jù)使用setItem方法。它接受兩個參數(shù)，第一個是鍵名，第二個是保存的數(shù)據(jù)

　　[注意]不同的瀏覽器存入的Storage位置不一樣，不能通用

sessionStorage.setItem("key","value");
localStorage.setItem("key","value");

【getItem()】

　　讀取數(shù)據(jù)使用getItem方法。它只有一個參數(shù)，就是鍵名

var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");

　　除了使用setItem()和getItem()方法之外，還可以使用屬性來存取數(shù)據(jù)

localStorage.setItem("key1","value1");
localStorage.testkey = 'testvalue';
console.log(localStorage.getItem('testkey'));//'testvalue'console.log(localStorage.key1);//'value1'

 

清除數(shù)據(jù)

【removeItem()】

　　removeItem()方法用于清除某個鍵名對應(yīng)的數(shù)據(jù)

　　[注意]清除不存在的鍵名不會報錯，只會靜默失敗

sessionStorage.removeItem('key');
localStorage.removeItem('key');

　　除了使用removeItem()方法，還可以使用delete操作來清除數(shù)據(jù)

　　[注意]IE7-瀏覽器不支持delete操作符來清除storage數(shù)據(jù)

localStorage.setItem("key1","value1");delete localStorage.key1;
console.log(localStorage.key1);//undefinedconsole.log(localStorage.getItem('key1'));//null

【clear()】

　　clear方法用于清除所有保存的數(shù)據(jù)

sessionStorage.clear();
localStorage.clear();

 

遍歷操作

【key()】

　　key(index)方法返回index位置處的值的名字

sessionStorage.setItem("key1","value1");
sessionStorage.setItem("key2","value2");
console.log(sessionStorage.key(0));//'key1'console.log(sessionStorage.key(1));//'key2'console.log(sessionStorage.key(2));//null

【length】

　　length屬性返回名值對兒的個數(shù)

console.log(sessionStorage.length);//2

　　利用length屬性和key()方法，可以遍歷所有的鍵

for(var i = 0; i < localStorage.length; i++){    var key = localStorage.key(i);    var value = localStorage.getItem(key);
}

　　還可以使用for-in循環(huán)來迭代

for(var key in localStorage){    var value = localStorage.getItem(key);
}

 

存儲事件

　　首先，要特別注意的是，該事件只發(fā)生在window對象上，在document對象上觸發(fā)無效，且使用DOM0級、DOM2級事件處理函數(shù)都可以

　　無論對sessionStorage還是localStorage進行操作，都會觸發(fā)storage事件。當(dāng)通過屬性或setItem()方法保存數(shù)據(jù)，使用delete操作符或removeItem()刪除數(shù)據(jù)，或者調(diào)用clear()方法時，都會發(fā)生該事件

　　[注意]只有當(dāng)存儲數(shù)據(jù)真正發(fā)生改變的時候才會觸發(fā)存儲事件。像給已經(jīng)存在的存儲項設(shè)置一個一模一樣的值，抑或是刪除一個本來就不存在的存儲項都是不會觸發(fā)存儲事件的。通過getItem()方法獲取數(shù)據(jù)也不會觸發(fā)該事件

　　一般地，storage事件不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁面觸發(fā)。如果瀏覽器同時打開一個域名下面的多個頁面，當(dāng)其中的一個頁面改變sessionStorage或localStorage的數(shù)據(jù)時，其他所有頁面的storage事件會被觸發(fā)，而原始頁面并不觸發(fā)storage事件?？梢酝ㄟ^這種機制，實現(xiàn)多個窗口之間的通信

　　[注意]IE8-瀏覽器不支持storage事件，IE9+瀏覽器與其他標(biāo)準(zhǔn)瀏覽器有所不同，無論數(shù)據(jù)真實值是否變化，只要對數(shù)據(jù)進行設(shè)置或刪除，都會觸發(fā)觸發(fā)該事件，且原始頁面和同一域名下的其他頁面都會觸發(fā)

　　這個事件的event對象有以下屬性

url:觸發(fā)事件的鏈接地址
key:設(shè)置或者刪除的鍵名
newvalue:如果是設(shè)置值，則是新值；如果是刪除鍵，則是null
oldValue:鍵被更改之前的值
storageArea:返回觸發(fā)事件的對象

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

改變輸入框中的值，再點擊按鈕，會觸發(fā)storage事件按鈕

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

<!-- 其他頁面 -->
<div id="result"></div><script>window.onstorage = function(e){
    e = e || event;
    result.innerHTML = 'key: ' + e.key + '<br>oldValue: ' + e.oldValue + '<br>newValue: ' + e.newValue + '<br>url: ' + e.url + '<br>storageArea: ' + e.storageArea;  
}</script>

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

原始頁面：

其他頁面：

好的代碼像粥一樣，都是用時間熬出來的

標(biāo)簽: javascript總結(jié)