HTML 5 Web 存儲

HTML5 提供了兩種在客戶端存儲數據的新方法：

localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲

html5 web storage的瀏覽器支持判斷

要判斷瀏覽器是否支持localStorage可以使用下面的代碼：

if(window.localStorage){
alert("瀏覽支持localStorage")
}else{alert("瀏覽暫不支持localStorage") }
//或者
if(typeof window.localStorage == 'undefined')
{alert("瀏覽暫不支持localStorage") }

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法
setItem存儲value

用途：將value存儲到key字段
用法：.setItem( key, value)
代碼示例：sessionStorage.setItem("key", "value");     localStorage.setItem("site", "xiao");


getItem獲取value

用途：獲取指定key本地存儲的值
用法：.getItem(key)
代碼示例：var value = sessionStorage.getItem("key");     var site = localStorage.getItem("site");



removeItem刪除key

用途：刪除指定key本地存儲的值
用法：.removeItem(key)
代碼示例：sessionStorage.removeItem("key");     localStorage.removeItem("site");


clear清除所有的key/value

用途：清除所有的key/value
用法：.clear()
代碼示例：sessionStorage.clear();     localStorage.clear();

其他操作方法：點操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通對象一樣用點(.)操作符，及[]的方式進行數據存儲，像如下的代碼：

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);