一、localStorage和sessionStorage的区别:
1、他们都是用来存储客户端临时信息的对象。
2、他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器实现)。
3、(1)localStorage生命周期是永久的,除非用户在浏览器提供的UI上清除localStorage信息,否则这些信息永远存在。
(2)sessionStorage生命周期为当前窗口或者标签页,一旦窗口或者标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
4、不同浏览器无法共享localStorage或者sessionStorage中的信息。
(1)相同浏览器的不同页面之间可以共享相同的localStorage(页面属于相同域名和端口)
(2)不同页面或者标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
二、localStorage和sessionStorage的用法(localStorage和sessionStorage使用时使用相同的API):
1、设值:
localStorage.setItem(“key”,“value”);//以“key”为名称存储一个值“value”
localStorage.key = “value”;
localStorage[“key”]=“value”;
2、取值:
localStorage.getItem(“key”);//获取名称为“key”的值
value=localStorage.key;
value=localStorage[“key”];
3、枚举值:
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
4、删除:
localStorage.removeItem(“key”);//删除名称为“key”的信息。
delete localStorage.getItem(“key”);//删除名称为“key”的信息。(非IE8下)
5、清空:
localStorage.clear();//清空localStorage中所有信息
三、localStorage和sessionStorage的存储事件:
1、无论什么时候存储在localStorage或者sessionStorage的数据发生改变,浏览器都会在其他对该数据可见的窗口对象上触发存储事件(但是在对数据进行改变的窗口对象上是不会触发的)。只有当存储数据真正发生改变的时候才会触发存储事件。像已经存在的存储项设置一个一模一样的值,或者是删除一个本来就不存在的值是不会触发存储事件的。
2、event.key 属性:属性值为在 session 或 localStorage 中被修改的数据键值。
event.oldValue 属性:属性值为在 sessionStorage 或 localStorage 中被修改的值。
event.newValue 属性:属性值为在 sessionStorage 或 localStorage 中被修改后的值
event.url 属性:属性值为修改 sessionStorage 或 localStorage 中值的页面的URL地址
event.storageArea 属性 : 属性值为被变动的 sessionStorage 对象或 localStorage 对象
3、例子:
//利用storage事件实时监视wev Storage中的数据
window.addEventListener('storage',function (e) {
//e只是一个传参 //获取被修改的键值
if (e.key == 'test') {
//获取将要被添加内容的元素
var output = document.getElementById('output');
//将获取到的修改值在元素中输出
output.innerHTML = '原有值:' + e.oldValue;
output.innerHTML += '<br />新值:' + e.newValue;
output.innerHTML += '<br />变动页面地址:' + utf8_decode(unescape(e.url));
//分别打印会发现内容一致
console.log(e.storageArea);
console.log(localStorage);
}
},false);