HTML5提供了2種在客戶端存儲(chǔ)的方法：
1、localStorage --沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
2、sessionStorage --針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)，會(huì)話結(jié)束時(shí)會(huì)被清空
一、作用域
localStorage在相同的協(xié)議、主機(jī)名、端口下，就能讀?。薷牡酵环輑ocalStorage數(shù)據(jù)
sessionStorage在上述的條件下還要求在同一個(gè)窗口，也就是只要關(guān)閉了瀏覽器（包括關(guān)閉標(biāo)簽頁(yè)），就會(huì)被清空
二、VS cookie：
1、存儲(chǔ)數(shù)據(jù)更多 （ cookie只有4k，localStorage一般5M ）
2、速度快，效率高
三、數(shù)據(jù)結(jié)構(gòu)
采用標(biāo)準(zhǔn)鍵值對(duì)數(shù)據(jù)結(jié)構(gòu)，鍵是唯一的，重復(fù)以同一個(gè)鍵來(lái)賦值的話，會(huì)覆蓋上次的值。
四、localStorage方法
1、特性
（1）只支持string類型
（2）瀏覽器在隱私模式下不可讀取
（3）localStorage不能被爬蟲(chóng)抓取到
2、3種寫(xiě)入方法
var storage=window.localStorage;
第一種：//寫(xiě)入a字段 ? ? ?storage["a"]=1;
第二種：//寫(xiě)入b字段 ? ? ? storage.b=1;
第三種：//寫(xiě)入c字段 ? ? ? ?storage.setItem("c", 3);
3、刪除
全部清除 ? ? ? ? ? window.localStorage.clear( )
對(duì)某個(gè)鍵值對(duì)的刪除 ? ? ? ? ? ? ?window.localStorage.removeItem('a’)
4、特別注意這些操作都只能對(duì)同一個(gè)域下的數(shù)據(jù)進(jìn)行操作
五、sessionStorage方法
1、VS localStorage
相同：各種語(yǔ)法特性都相同
不同：localStorage里存的數(shù)據(jù)沒(méi)有過(guò)期的時(shí)間設(shè)置，而sessionStorage里存儲(chǔ)的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)被清除
六、localStorage的跨域問(wèn)題
這一點(diǎn)我想重點(diǎn)介紹一下，因?yàn)轫?xiàng)目設(shè)計(jì)，所以研究里好幾天，但是最后由于項(xiàng)目不適用沒(méi)有使用，但是一些知識(shí)想整理出來(lái)
這里我們使用HTML5的postMessage并結(jié)合iframe進(jìn)行跨域
我們模擬一個(gè)場(chǎng)景：將http://a.com/index.html頁(yè)面中的用戶信息帶到http://b.com/index.html中去
1、流程如圖所示：
1)、在a.com里插入一個(gè)iframe，并指向b.com
2)、a.com通過(guò)postMessage傳遞指定格式的消息給b.com
3)、b.com解析a.com傳遞過(guò)來(lái)的消息內(nèi)容，調(diào)用localStorage API操作本地?cái)?shù)據(jù)
4)、b.com使用localStorage中的數(shù)據(jù)
2、細(xì)小知識(shí)點(diǎn)
我使用的過(guò)程中遇到的一些小的知識(shí)點(diǎn)我也想和大家一起學(xué)習(xí)一下
獲取iframe時(shí)，我們可以使用window.frames來(lái)獲取全部iframe對(duì)象，相當(dāng)于document.getElementsByTagName( "iframe" )
3、代碼(此處只寫(xiě)js代碼)
http://a.com/index.html
var domain = 'http://b.com/index.html'; //定義目標(biāo)域名
var message = {userId:1,userName:"wendy"}; //你在這里也可以傳遞一些數(shù)據(jù)，obj等
//發(fā)送消息和目標(biāo)URI
window.frames[0].contentWindow.postMessage(message,domain); //假設(shè)頁(yè)面上只有一個(gè)iframe
http://b.com/index.html
//響應(yīng)事件
window.addEventListener('message',function(event) {
? ? if(event.origin !== 'http://a.com/index.html') return;
? ? console.log('message received:? ' + event.data,event);//這里的event.data就是剛剛傳過(guò)來(lái)的用戶信息
},false);
4、結(jié)果
結(jié)果我這樣操作后，event.data里面拿不到任何有用信息，為什么呢？
因?yàn)槲业男枨笫菑膆ttp://a.com/index.html跳轉(zhuǎn)到http://b.com/index.html,在打開(kāi)http://b.com/index.html時(shí)a.com已經(jīng)銷毀，也就沒(méi)有那樣的iframe存在來(lái)發(fā)送數(shù)據(jù)，所以拿不到數(shù)據(jù)；也就是說(shuō)只有當(dāng)執(zhí)行它們的頁(yè)面位于具有相同的協(xié)議（通常為https），端口號(hào)（443為https的默認(rèn)值），以及主機(jī)? (兩個(gè)頁(yè)面的模數(shù)Document.domain設(shè)置為相同的值) 時(shí)，這兩個(gè)腳本才能相互通信。
前端小白，以上是我的個(gè)人理解，如有錯(cuò)誤，忘批評(píng)指正，謝謝大家
參考資料：
http://annn.me/cross-domain-local-storage/
http://www.itdecent.cn/p/e86d92aeae69
