H5C3-day08

本地存储

特性

• 设置、读取方便

• 容量较大，sessionStorage约5M、localStorage约20M

• 只能存储字符串，可以将对象JSON.stringify() 编码后存储

localStorage

        永久生效，除非手动删除

        可以多窗口（页面）共享

sessionStorage

        生命周期为关闭浏览器窗口

        在同一个窗口(页面)下数据可以共享

方法

        setItem(key, value) 设置存储内容

        getItem(key) 读取存储内容

        removeItem(key) 删除键值为key的存储内容

        clear() 清空所有存储内容

本地存储的方法

调用setItem(key, value)方法将对应的名字和值传递进去，可以实现数据存储。

localStorage.setItem('name', '张三');

调用getItem(key)方法，将名字传递进去，可以获得对应的值。

localStorage.getItem('name'); // '张三'

调用removeItem(key)方法，将名字传递进去，可以删除对应的数据。

localStorage.removeItem('name');

使用length属性和key(index)方法，传入0至length-1之间的数字，可以遍历所有存储数据的名字。

 for(var i = 0; i < localStorage.length; i++) { //length表示所有键值对的总数

 	var name = localStorage.key(i); // 获取第i对的名字

 	var value = localStorage.getItem(name); // 获取name对应的值

}

调用clear()方法（不需要参数），可以删除所有存储的数据。

localStorage.clear();

存储事件

为存储事件注册处理程序可以使用addEventListener()方法。

注意点：onstorage当前页面不触发：

• 当前页面不同窗口触发。

• 另外的监听页面触发。

与存储事件相关的事件对象有5个非常重要的属性：

• key : 修改或删除的key值，如果调用clear()时，该属性值为null

• newValue: 新设置的值，如果调用removeItem()时，该属性值为null

• oldValue : 调用改变前的value值；添加新项时，该属性值为null

• storageArea : 当前的storage对象

• url : 触发该存储变化脚本所在文档的URL（也就是说哪个页面修改的数据）