html5 web Storage
2012-02-17 21:46 边缘er 阅读(270) 评论(0) 编辑 收藏 举报web Storage本地存储是对cookies机制的改善。Storage分为sessionStorage和localStorage（都是window的属性）。前者在窗口之间可以共享存储数据（会话），如果关闭浏览器，数据就没了；后者即使关了浏览器再打开依然可以读到数据（需是同一个浏览器）。二者的用法一样。
简单示例首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 webStorage</title>
</head>
<body>
<span id="span1">首页内容</span>，先点击存储按钮<input onClick="saveStorage()" type="button" value="存储首页内容" /><br>
<a href="2.html" target="_blank">然后点此链接，去2.html中取得本页存储的内容</a>
<script type="text/javascript">
function saveStorage(){
var value = document.getElementById('span1').innerHTML;
sessionStorage.setItem('valueIndex', value);
}
</script>
</body>
</html>
内页读取首页存的数据2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 webStorage 2.html</title>
</head>
<body>
<span id="span2">点击按钮后此处获取首页存储的内容</span><input onClick="getStorage()" type="button" value="获取存储内容" /><br>
<script type="text/javascript">
function getStorage(){
var valueIndex = sessionStorage.getItem('valueIndex');
document.getElementById('span2').innerHTML = valueIndex;
}
</script>
</body>
</html>
结果：内页2.html中的"点击按钮后此处获取首页存储的内容"变为了"首页内容"。注意，这个例子在本地不能测，需要环境，比如apache。
方法
sessionStorage.setItem(key,value);//存储
localStorage.getItem(key);//取
sessionStorage.removeItem(key);//删除数据
localStorage.clear();//清楚所有数据
上面4个方法对2种存储都使用。设置存储数据方法setItem传入一对"键值对"，取数据方法getItem传入键值。可以向下面这样简化读取
sessionStorage.key = 'value';//直接存储
alert(sessionStorage.key)//直接取
特性
length：假如一个页面有很多sessionStorage，可以通过sessionStorage.length获取个数
key(index)：同上，可以通过sessionStorage.key(0)获取第一个存储数据。
storage监听事件
只要有数据更新，同源的每个窗口都会触发storage事件
window.addEventListener('storage', function(e){alert(e.key)}, false)
监听事件传入一个事件对象e，可获取一下内容
e.key：被更新或删除的键
e.oldValue：更新前的数据
e.newValue：更新后的数据
e.url：storage事件发生源
e.storageArea：引用发生storage的sessionStorage或localStorage
