localStorage和sessionStorage

  localStorage和sessionStorage是HTML5中用于本地存储的方法。二者的用法几乎相同,不同点是二者的存储时间是不同的:localStorage是一直存储在本地的,而sessionStorage则是当当前窗口关闭的时候,存储的数据就会清空。

  1.  判断是否支持本地存储

  判断浏览器是否支持本地存储也是和简单的,只要执行下面的代码就可以了(以localStorage为例):

if(window.localStorage){
    alert('ok');
}else{
    alert('no');
}

  

  2.   localStorage的使用

  本地存储是通过键值对进行存储的,如下:

var storage = window.localStorage;
storage['name'] = 'local';
console.log(storage['name']);
storage.setItem('name','storage');
console.log(storage.getItem('name'));

  由此可见对于键值对的存储有两种方式(事实上可以说是三种方式,包括storage.name):用对象设置获取属性和调用函数的方法。对于存储而言是必须要有清除数据的方法的,在本地存储中,用于清除键值对的方法是removeItem()和clear(),从字面上的意思我们就可以知道:removeItem是用于清除某一个键值对,而clear是用于清除所有的键值对。

var storage = window.localStorage;
storage['name'] = 'local';
storage.removeItem('name');
console.log(storage.name);
storage.setItem('name','storage');
storage.clear();
console.log(storage.getItem('name'));

  如上代码,均显示为undefined,因为每次设置将键值对存入本地后,都会删除键值对。

  另外本地存储可以使用length来获取键值对的个数。同时HTML5还提供了key(index)函数,可以获得相应的键名,通过key也可以遍历本地存储,将本地存储的键值对都打印出来。

var storage = window.localStorage;
storage.setItem('name','jyy');
storage.setItem('home','chengde');
storage.setItem('age','26');
for(var i = 0; i < storage.length; i++){
    console.log('key:' + storage.key(i) + '---value:' + storage.getItem(storage.key(i)));
}

  如上面的代码就是将localStorage中的所有键值对进行输入。需要注意的是HTML5的本地存储只能存储字符串类型,因此想要使用其他的类型,需要自己手动转换.

  另外本地存储还提供了一个storage事件,可以对键值对进行监听。

  PS.在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更 让人想的通些.

原文地址:https://www.cnblogs.com/jyybeam/p/5796498.html