Storage-接口

jiezi

5 年前

sessionStorage 保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。

保存的数据都以“键值对”的形式存在

所有的数据都是以文本格式保存

某个网页存入的数据，只有同域下的网页才能读取，如果跨域操作会报错

Storage 接口只有一个属性。

Storage.length：返回保存的数据项个数。

无返回值
window.sessionStorage.setItem(‘key’, ‘value’);
window.localStorage.setItem(‘key’, ‘value’);

window.localStorage.foo = ‘123’;
window.localStorage[‘foo’] = ‘123’;
window.localStorage.setItem(‘foo’, ‘123’);

Storage.key()接受一个整数作为参数（从零开始），返回该位置对应的键值。
for (var i = 0; i < window.localStorage.length; i++) {
console.log(localStorage.key(i));
}

Storage 接口储存的数据发生变化时，会触发 storage 事件，可以指定这个事件的监听函数。

window.addEventListener(‘storage’, onStorageChange);
监听函数接受一个 event 实例对象作为参数。这个实例对象继承了 StorageEvent 接口，有几个特有的属性，都是只读属性。

StorageEvent.key：字符串，表示发生变动的键名。如果 storage 事件是由 clear()方法引起，该属性返回 null。
StorageEvent.newValue：字符串，表示新的键值。如果 storage 事件是由 clear()方法或删除该键值对引发的，该属性返回 null。
StorageEvent.oldValue：字符串，表示旧的键值。如果该键值对是新增的，该属性返回 null。
StorageEvent.storageArea：对象，返回键值对所在的整个对象。也说是说，可以从这个属性上面拿到当前域名储存的所有键值对。
StorageEvent.url：字符串，表示原始触发 storage 事件的那个网页的网址。

注意，该事件有一个很特别的地方，就是它不在导致数据变化的当前页面触发，而是在同一个域名的其他窗口触发
也就是说，如果浏览器只打开一个窗口，可能观察不到这个事件。比如同时打开多个窗口，当其中的一个窗口导致储存的数据发生改变时，只有在其他窗口才能观察到监听函数的执行。可以通过这种机制，实现多个窗口之间的通信。

参考链接

Storage-接口

概述

属性和方法

Storage.setItem()

Storage.getItem()

Storage.removeItem()

Storage.clear()

Storage.key()

storage 事件