html5中的Web Storage包括了兩種存儲方式:sessionStorage和localStorage。javascript
sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲,除非主動刪除數據,不然數據是永遠不會過時的。html
瀏覽器支持狀況:html5
瀏覽器的支持除了IE7及如下不支持外,其餘標準瀏覽器都徹底支持(ie及FF需在web服務器裏運行),值得一提的是IE老是辦好事,例如IE七、IE6中的UserData其實就是javascript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage。
要判斷瀏覽器是否支持localStorage可使用下面的代碼:
if(window.localStorage){ alert("瀏覽支持localStorage")}else{ alert("瀏覽暫不支持localStorage")}//或者if(typeof window.localStorage == 'undefined'){ alert("瀏覽暫不支持localStorage")}
localStorage和sessionStorage都具備相同的操做方法,例如setItem、getItem和removeItem等
用法:.setItem( key, value)
代碼示例:
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
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();
使用實例:java
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<input type='button' onclick='set_item()' value='存值' />
<input type='button' onclick='get_item()' value='取值' />
<input type='button' onclick='delete_item()' value='刪除' />
<script>
//localStorage 存值永久有效
function set_item(){
var user = {};
user.name = 'Adam Li';
user.age = 25;
user.home = 'China';
localStorage.setItem('userinfo',JSON.stringify(user));
}
//localStorage取值
function get_item(){
var data = JSON.parse(localStorage.getItem('userinfo'));
alert("name:"+data.name+"\r age:"+data.age+"\r home:"+data.home);
}
//localStorage刪除指定鍵對應的值
function delete_item(){
localStorage.removeItem('userinfo');
alert(localStorage.getItem('userinfo'));
}
</script> web
/* 瀏覽器
sessionStorage使用方法請參照localStorage使用例子,實際應用要用哪一個關鍵看你需求了,若是是要永久保存的,那麼就請使用localStorage方法存取值,若是是要瀏覽關閉會話結束就清除緩存的,固然就得選擇sessionStorage方法了緩存
*/服務器
Aug 23th,2012 李漢團session