1 背景
- 两者目的是:解决,通过客户端存储不需要频繁发送回服务器的数据时,的问题。
- cookie是每次发送请求,cookie数据也会发送。
- sessionStorage 和 localStorage 统称为 Storage 类型。
- 浏览器中两者均不受页面刷新影响
2 特性
Storage 实例与其他对象一样,但增加了一些方法?
- clear():删除所所有值;(不在Firefox中实现)
- getItem(name):取得给定 name 的值
- key(index):取得给定 index 的值,
- removeItem(name):删除给定 name 的值
- setItem(name,value):设置给定 name 的值 value
以上某些方法,也可以通过操作对象属性操作达到效果:
- 设置 属性的值:sessionStorage.name = ‘Jack’;
- 获取 属性的值:sessionStorage.name;
- 删除:delete sessionStorage.name;
3 不同
sessionStorage 是跨会话的存储机制,会话结束sessionStorage 就会消失
localStorage 是永久存储机制
4 监听Storage对象变化事件
// 监听Storage对象变化事件
window.addEventListener('storage',(event)=>{
// event对象有四个属性:
// 1、domain:存储变化的域
// 2、key :发生变化的键
// 3、newValue:被设置的新值;如果是被删除,值为unll;
// 4、oldValue:之前的值,
});