标签：本地存储 webstroage localstorage sessionstorage
WebStorage是用来实现客户端存储数据，大家都知道之前的Cookie就是客户端存储的一种方式，今天看一看html5新增的本地存储方式：localStorage和sessionStorage。
localStorage：存储的数据会一直存在本地客户端，即使浏览器关闭了也会存在；
sessionStorage： 只是针对同一个 session 的数据存储，打开一个新来浏览器窗口或者窗口一旦关闭数据就没了。
既然知道了这两种新的本地存储方式，那怎么用那？？
在HTML5 通过使用 JavaScript 来实现数据存储和访问；先来看localStorage怎么实现现数据存储和访问；
<script>
if(window.localStorage){
localStorage.lastname="Smith";
document.write(localStorage.lastname);
}else{
alert('对不起！您的浏览器不支持localStorage！');
}
</script>1. 首先检测浏览器是否支持本地存储。
2. localStorage存储数据可以直接通过给localStorage添加一个属性
例如：localStorage.x 或者localStorage["x"];
访问数据可是通过localStorage.x 或者localStorage["x"];
除了上面的方式还可以通过localStorage下自带的getItem()和setItem()方法来存储和访问数据。
setItem()方法是以key-value键值对的形式存储的。
getItem(key)的方式来访问数据;
removeItem(key)清除数据时使用。如果想一次性清除所有的键值对，使用clear()。
除了上面几个方法之外localStorage还有length属性，可一个key()方法
例如：localStorage.length 返回存储数据的个数（存储了多少个键值对）
localStorage.key( index ) 返回下标为index的key
例如：通过key()方法和length属性实现localStorage或sessionStorage遍历
var storage = localStorage;
functionshowStorage(){
for(vari=0;i<storage.length;i++){
//key(i)获得相应的键，再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}<body>
<p>
该页面被访问了: <span id="count"> </span>次
</p>
<script>
if (!localStorage.pageLoadCount)
localStorage.pageLoadCount = 0;
localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
document.getElementById('count').textContent = localStorage.pageLoadCount;
</script>
</body>存储JSON格式数据，需要将JSON对象转换成JSON数据串
JSON.stringify(obj) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(str) 将数据解析成对象，返回解析后的对象
备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。
HTML5的本地存储sessionStorage 和 localStorage还提供了一个storage事件。该事件可以对键值对的改变进行监听。storage事件只有在“存储的数据” 发生变化时才会被触发。
例如当setItem(),removeItem()或者clear() 方法被调用时，并且数据真的发生了改变时，storage事件就会被触发。注意这里的的条件是“数据真的发生了变化”。也就是说，如果当前的存储区域是空的，再去调用clear()是不会触发事件的。或者通过setItem()来设置一个与现有值相同的值，事件也是不会触发的。当存储区域发生改变时才会被触发。
if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
//showStorage();
}
上面代码中的变量e是一个StorageEvent对象，这个对象拥有许多好用的属性，可以很好的观察键值对的变化。
· storageArea: 表示存储类型（localStorage或者sessionStorage）
· key: 发生改变项的key
· oldValue: key的原值
· newValue: key的新值
· url*: key改变发生的URL
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等用法和localStorage完全一样。这里就不再一一赘述了！
HTML5本地存储-localStorage和sessionStorage
标签：本地存储 webstroage localstorage sessionstorage
原文地址：http://blog.csdn.net/u014205965/article/details/46509055
