html5 sessionStorage 與 localStorage使用詳解
html5中的Web Storage包括了兩種存儲方式:sessionStorage和localStorage。
sessionStorage用于本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。
而localStorage用于持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。
瀏覽器支持情況:
瀏覽器的支持除了IE7及以下不支持外,其他標準瀏覽器都完全支持(ie及FF需在
web服務器里運行),值得一提的是IE總是辦好事,例如IE7、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();
使用實例:
<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>
/*
sessionStorage使用方法請參照localStorage使用例子,實際 應用要用哪個關鍵看你需求了,如果是要永久保存的,那么就請使用localStorage方法存取值,如果是要瀏覽關閉會話結束就清除緩存的,當然就得選 擇sessionStorage方法了
*/