HTML5WebStorage本地存储

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>");
	 }
}

利用localStorage本地存储实现页面的访问次数：

<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>

注意： HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。这也就是上面例子中必须要使用parseInt的原因。

存储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

HTML5WebStorage本地存储

猜你喜欢