HTML5 Web存儲--localStorage/sessionStorage

HTML5提供了2種在客戶端存儲的方法：

 

一、 localStorage --沒有時間限制的數據存儲

二、 sessionStorage --針對一個session的數據存儲，會話結束時會被清空

1、做用域

 

做用域

localStorage在相同的協議、主機名、端口下，就能讀取／修改到同一份localStorage數據

sessionStorage在上述的條件下還要求在同一個窗口，也就是隻要關閉了瀏覽器（包括關閉標籤頁），就會被清空

2、VS cookie：

一、存儲數據更多 （ cookie只有4k，localStorage通常5M ）

二、速度快，效率高

3、數據結構

採用標準鍵值對數據結構，鍵是惟一的，重複以同一個鍵來賦值的話，會覆蓋上次的值。

4、localStorage方法

一、特性

（1）只支持string類型

（2）瀏覽器在隱私模式下不可讀取

（3）localStorage不能被爬蟲抓取到

二、3種寫入方法

var storage=window.localStorage;

第一種：//寫入a字段      storage["a"]=1;

第二種：//寫入b字段       storage.b=1;

第三種：//寫入c字段        storage.setItem("c", 3);

三、刪除

所有清除           window.localStorage.clear( )

對某個鍵值對的刪除              window.localStorage.removeItem('a’)

四、特別注意這些操做都只能對同一個域下的數據進行操做

5、sessionStorage方法

一、VS localStorage

相同：各類語法特性都相同

不一樣：localStorage裏存的數據沒有過時的時間設置，而sessionStorage裏存儲的數據在頁面會話結束時被清除

6、localStorage的跨域問題

這一點我想重點介紹一下，由於項目設計，因此研究裏好幾天，可是最後因爲項目不適用沒有使用，可是一些知識想整理出來

這裏咱們使用HTML5的 postMessage並結合iframe進行跨域

咱們模擬一個場景：將http://a.com/index.html頁面中的用戶信息帶到http://b.com/index.html中去

一、流程如圖所示：

 

image2

1)、在a.com裏插入一個iframe，並指向b.com

2)、a.com經過postMessage傳遞指定格式的消息給b.com

3)、b.com解析a.com傳遞過來的消息內容，調用localStorage API操做本地數據

4)、b.com使用localStorage中的數據

二、細小知識點

我使用的過程當中遇到的一些小的知識點我也想和你們一塊兒學習一下

獲取iframe時，咱們能夠使用window.frames來獲取所有iframe對象，至關於document.getElementsByTagName( "iframe" )

三、代碼(此處只寫js代碼)

http://a.com/index.html

var domain = 'http://b.com/index.html'; //定義目標域名

var message = {userId:1,userName:"wendy"}; //你在這裏也能夠傳遞一些數據，obj等

//發送消息和目標URI

window.frames[0].contentWindow.postMessage(message,domain); //假設頁面上只有一個iframe

http://b.com/index.html

//響應事件

window.addEventListener('message',function(event) {

    if(event.origin !== 'http://a.com/index.html') return;

    console.log('message received:  ' + event.data,event);//這裏的event.data就是剛剛傳過來的用戶信息

},false);

四、結果

結果我這樣操做後，event.data裏面拿不到任何有用信息，爲何呢？

由於個人需求是從http://a.com/index.html跳轉到http://b.com/index.html,在打開http://b.com/index.html時a.com已經銷燬，也就沒有那樣的iframe存在來發送數據，因此拿不到數據；也就是說必須得在父頁面中包含子頁面時這種方案纔可行。

前端小白，以上是個人我的理解，若有錯誤，忘批評指正，謝謝你們

參考資料：

http://annn.me/cross-domain-local-storage/

http://www.jianshu.com/p/e86d92aeae69

http://blog.csdn.net/monkindey/article/details/23659387

http://www.haorooms.com/post/window_postMessage