html5 sessionStorage 与 localStorage使用详解

12年前

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方法了

*/