前言

Web Storage大家应该都用过很多了，它是html5新增的本地存储API，解决cookie的一些痛点，比如cookie容量太小（4KB），以及cookie每次http请求都会传回服务器，可能某些情况不需要传回服务器，这样加大了网络开销。

Web Storage它可以最大存储5MB，然后它是本地存储，不会传输给服务器，同源策略，安全且方便。

Web Storage分为localStorage和sessionStorage。今天来讲讲Web Storage的几个知识点。

正文

sessionStorage的共享

说起sessionStorage，它存在浏览器的当前标签页，同源才能访问。

如果浏览器关闭，则sessionStorage就被清除了
但是如果标签页关闭，恢复标签页则sessionStorage还在，以及刷新页面都不会清除sessionStorage

不同标签页的sessionStorage都是独立的，不共享的。

下面这个例子：

a,b页面处于同源，但是b页面却打印不出来a页面设置的sessionStorage

js 复制代码

// a.html
sessionStorage.setItem('name', '答案cp3')
console.log(sessionStorage.getItem('name')) // 答案cp3

// b.html
console.log(sessionStorage.getItem('name')) // null

那如何让sessionStorage可以共享呢？

我们先看看mdn上关于sessionStorage的描述

在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookie 的运行方式不同。

如果新的标签页是从当前标签页打开的，则会复制当前标签页的sessionStorage到新的标签页，这样就能共享了。

我总结有2种方式能实现，下面分别讲讲。

使用a链接（rel="opener"）

默认使用a链接打开，还不行，还需要加上rel="opener"，代表的是新打开的标签页可以通过window.opener访问当前标签页的window，同时还把sessionStorage共享过去。

js 复制代码

<a href="./b.html" target="_blank" rel="opener">a链接跳转</a>

注意⚠️：因为这种方式是不安全的，所以我们需要确认打开的网页是值得信任的，否则不要加上rel="opener"。

使用window.open

第二种方式是使用window.open,传入我们要跳转的链接，打开后会复制当前标签页的sessionStorage，新打开的页面也可以通过window.opener访问当前标签页的window，所以我们要确保打开的链接是可以信任的。

js 复制代码

const btn = document.querySelector('button')
btn.addEventListener('click', () =>{
    window.open('./B.html')
})

window.open打开的链接默认可以通过window.opener访问原页面，如果需要禁止，传入第三个参数noopener即可

注意：无论是a链接 还是window.open ，共享过去的sessionStorage跟原来的sessionStorage已经没有关联，修改并不会影响对方。

比如你在a页面修改sessionStorage的值，b页面共享的sessionStorage还是原来的值。

storage事件

当我们需要在窗口的两个同源页面，但是是不同标签页进行通信时，我们应该怎么做？

vue提供的事件通信都是针对当前标签页内的，这个时候可以使用storage事件。

storage事件的触发是基于localstorage的变化，localstorage如果没有手动清除，则一直保留在浏览器，关闭浏览器也不会清除，同源才能访问。

js 复制代码

// a.html
window.addEventListener('storage', (e) => {
  console.log('e:', e)
})

// b.html
localStorage.setItem('namge', '答案cp3')

a,b页面需要在同源策略下，然后b页面设置localStorage（有变化），就会在a页面触发storage事件。

返回的事件属性中，有个key，代表localStorage设置的key，还有newValue和oldValue代表新值和旧值。

注意：在当前页面设置localStorage，不会触发storage事件，而是在其它同源页面触发storage事件。

总结

上面就是总结下Web Storage的几个知识点，Web Storage一般都会用，但是有些细节如果没有实践过，还是会记不清楚，会遗漏。

于是便有了这篇文章，感谢你们的阅读。