前言:最近开始使用 localStorage 在浏览器存储数据,用习惯后发现比cookie用起来更舒服,特记录此笔记。
基本概念
Web Storage 主要包括两种机制:
- sessionStorage : 为每一个给定的源维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。即该方法是用来存储session数据的。
- localStorage : 其他功能同上,但是该方法删除数据只能主动删除,重启浏览器不会有影响。
存储介绍
之所以转到web storage 存储,主要原因还是由于储存容量,众所周知,cookie的最大容量只有4K,非常小的容量,当页面需要大量全局变量时,cookie是完全不够的,而web storage在主流浏览器上基本都有5M左右的存储容量,不同浏览器会有些微区别,具体如下图:
firefox 也是完全支持的。
注意: IE9 支持上是有一些问题的,IE10 以上可以正常使用。
以下为本机测试储存数据(Chrome 和 Microsoft Edge 结果相同):
常用方法
以下方法以 localStorage 为例:
- 设置/修改值:
window.localStorage.setItem('test_key','test_val');
//该方法接受一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值。 - 获取值:
window.localStorage.getItem('test_key');
// 返回键名对应的值;该方法还可用来判断本地存储是否已被填充:if(!localStorage.getItem('test_key'))
- 删除单个键值对:
window.localStorage.removeItem('test_key');
//该方法接受一个键名作为参数,并把该键名从存储中删除。 - 清空所有键值对:
window.localStorage.clear();
//调用该方法会清空存储中的所有键名。 - 根据索引获取值:
window.localStorage.key();
//该方法接受一个数值 n 作为参数,并返回存储中的第 n 个键名。 - 唯一的属性 –
window.localStorage.length
获取存储在 Storage 对象里的数据项的数量。 - storage 事件 – 当存储区域被修改时触发。
注意
- Storage 受同源策略限制,不能跨域访问。
- localStorage和sessionStorage 两者都会创建Storage 对象,但是当同时使用时,两者的对象是完全互不相干的,独立创建与使用。
- localStorage只支持string类型的存储。
- storage 事件触发注意项:
- 在同一个页面内发生的改变不会起作用——在相同域名下的其他页面(如一个新标签或 iframe)发生的改变才会起作用。
- 重复设置相同的键值不会触发该事件
- Storage.clear() 方法至多触发一次该事件
最后,附上storage 事件属性表:
以上。