Web Storage

Web Storage：localStorage sessionStroage

sessionStorage
浏览器窗口关闭即会销毁；
浏览器窗口没有关闭，刷新或进入同源另一个页面也会存在【tab】；
打开单独的窗口，即使同一个页面也不是不同的；
适用只需要在浏览一组页面时使用，关闭了就不需要了

localStorage
会存储的更长久

localStorage cookie

cookie

• 大小受限【4k】
• 会随请求发送
• 需要单独封装方法

localStorage

• 更大的存储
• 仅存储本地不会发送到服务器
• 丰富的接口

浏览器支持

Paste_Image.png

属性和方法

storage.length

存储

storage.setItem('itemName','itemValue');
storage['itemName'] = 'itemValue';
storage.itemName = 'itemValue';

获取

storage.key(n); // n Number
storage.getItem('itemName');

删除

storage.removeItem('itemName');
storage.clear();

storage事件

storage发生变化时触发，不会冒泡，不能取消

4.4 The storage event
The storage event is fired when a storage area changes, as described in the previous two sections (for session storage, for local storage).
When this happens, the user agent must queue a task to fire an event with the name storage, which does not bubble and is not cancelable, and which uses the StorageEvent interface, at each Window object whose Document object has a Storage object that is affected.

storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的

使用场景：同时打开多个窗口下的数据同步更新；