發呆狗的窩: WebStorage@HTML5

Tuesday, January 22, 2013

WebStorage@HTML5

簡單來說幾個概念是

Web Storage是種可讓本地端的瀏覽器儲存資料的技術
同cookie一樣, 是以key-pair的方式呈現資料
不同於cookie僅有4K的限制,web storage的容量可達5M(視瀏覽器廠商實作而定)
web storage的資料並不會夾帶於http-header當中,因此較不會影響頻寬的使用
web storage以兩種方式呈現; localStorage以及sessionStorage，分別表示其生命週期
不同網域的storage是分開的,無法交換來使用(即同源策略; 也就是說，只有源自相同網站的網頁才能共享同一塊 local storage。

如何使用web storage

由於localStorage以及sessionStorage都是繼承自Storage物件,因此儲存資料的方式可使用setItem的方法如下

window.localStorage.setItem("MyKeyName","MyDataValue");
localStorage.setItem("MyKeyName","MyDataValue");
localStorage["MyKeyName"]="MyDataValue";
localStorage.MyKeyName="MyDataValue";

※上述的設定方式皆相同。

相對的,取得所儲存資料的方式當然就是使用getItem

var value1 = window.localStorage.getItem("MyKeyName");
var value2 = localStorage.getItem("MyKeyName");
var value3 = localStorage.MyKeyName;

當然也提供了移除的方法

window.localStorage.removeItem("MyKeyName");
localStorage.removeItem("MyKeyName");

最後,clear方法則是可移除storage當中所有的物件資料

※參考資料