1. 程式人生 > >HTML5 Web存儲--localStorage/sessionStorage

HTML5 Web存儲--localStorage/sessionStorage

ova nal p2p osd 包括 hl7 rtt pyc nfv

HTML5提供了2種在客戶端存儲的方法: 1、localStorage --沒有時間限制的數據存儲 2、sessionStorage --針對一個session的數據存儲,會話結束時會被清空 一、作用域 技術分享 作用域 localStorage在相同的協議、主機名、端口下,就能讀取/修改到同一份localStorage數據 sessionStorage在上述的條件下還要求在同一個窗口,也就是只要關閉了瀏覽器(包括關閉標簽頁),就會被清空 二、VS cookie: 1、存儲數據更多 ( cookie只有4k,localStorage一般5M ) 2、速度快,效率高 三、數據結構 采用標準鍵值對數據結構,鍵是唯一的,重復以同一個鍵來賦值的話,會覆蓋上次的值。 四、localStorage方法 1、特性 (1)只支持string類型 (2)瀏覽器在隱私模式下不可讀取 (3)localStorage不能被爬蟲抓取到 2、3種寫入方法 var storage=window.localStorage; 第一種://寫入a字段 storage["a"]=1; 第二種://寫入b字段 storage.b=1; 第三種://寫入c字段 storage.setItem("c", 3); 3、刪除 全部清除 window.localStorage.clear( ) 對某個鍵值對的刪除 window.localStorage.removeItem(‘a’) 4、特別註意這些操作都只能對同一個域下的數據進行操作 五、sessionStorage方法 1、VS localStorage 相同:各種語法特性都相同 不同:localStorage裏存的數據沒有過期的時間設置,而sessionStorage裏存儲的數據在頁面會話結束時被清除 六、localStorage的跨域問題 這一點我想重點介紹一下,因為項目設計,所以研究裏好幾天,但是最後由於項目不適用沒有使用,但是一些知識想整理出來 這裏我們使用HTML5的postMessage並結合iframe進行跨域 我們模擬一個場景:將http://a.com/index.html頁面中的用戶信息帶到http://b.com/index.html中去 1、流程如圖所示: 技術分享
image2 1)、在a.com裏插入一個iframe,並指向b.com 2)、a.com通過postMessage傳遞指定格式的消息給b.com 3)、b.com解析a.com傳遞過來的消息內容,調用localStorage API操作本地數據 4)、b.com使用localStorage中的數據 2、細小知識點 我使用的過程中遇到的一些小的知識點我也想和大家一起學習一下 獲取iframe時,我們可以使用window.frames來獲取全部iframe對象,相當於document.getElementsByTagName( "iframe" ) 3、代碼(此處只寫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);
4、結果 結果我這樣操作後,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

HTML5 Web存儲--localStorage/sessionStorage