webStorage

storage 存储事件

每当Storage对象发生变化时，都会在文档上触发Storage事件 注意⚠️：需要开两个同源的Tab页面，一个更改，一个监听，监听的页面如果更改storage无法监听到更改？ 拓展：如果在本页面监听storage的更改

  1. window.addEventListener('storage', (event)=>{
  2.     console.log(event);
  3. })

image.png

sessionStorage

存储在sessionStorage 对象中的数据只能由最初存储数据的页面中使用，在多页面程序中的用处有限

  • 页面会话 在浏览器打开期间一直保持，重新加载或恢复页面仍然保持原来的会话
  • 打开多个相同的URL的Tabs页面，会创建各自的 sessionStorage
  • 关闭对应的浏览器窗口window/tab, 会清除对应的sessionStorage

    延展：如果想要时间跨Tab访问sessionStorage， 如何实现？

localStorage

要访问同一个localStorage， 页面必须是来自同一个域（子域名不可以）、在相同的端口上使用相同的协议_

  • 浏览器会话，关闭浏览器重新打开后依然存在，只能删除或者手动清楚浏览器缓存
  • 都特定于页面的协议：非同源无法访问 localStorage / sessionStorage