sessionStorage中的复制，localStorage的共享
HUA

实践中发现浏览器中一个页面内嵌入到iframe中（与主项目跨域，非localhost的形式访问），里面的window.open即便打开的是跟iframe内嵌页面是同域的也不会复制sessionStorage，localStorage也不共享。其原因是window.open打开的页面是否跨域不取决于内嵌页面，而在于主项目，主项目是否与window.open是同域

cookie会自动携带在请求头中。localStorage空间大，不会失效，不同窗口，tab自动共享，同步。sessionStorage以浏览器会话为生命周期…and more..

4kb，会自动发送给server，server可以通过请求头set-cookie操作，JS可以通过访问document.cookie来操作，可以设置到期时间，不同窗口，标签可以自动同步，域内共享

localStorage

5MB-10MB。同源条件下，不同标签页，窗口会自动同步，自动共享，不会过期，永久有效，只能被用户手动清除或通过JavaScript代码进行删除

sessionStorage

通常为 5MB 或以下，遵循同源策略

  • 生命周期： 仅在当前会话期间有效，当用户关闭浏览器窗口或标签页时会被自动清除。
  • 共享状态：同源条件下，使用window.open或者a标签等在新标签或窗口打开一个页面时 会复制当前会话作为新会话，后续两个页面的sessionStorage对象互不影响

PS：可以存储的范围大小有时候因为浏览器有些许差异

这里比较难理解的是sessionStorage，做如下解释：

  1. 浏览器会话是可以理解为一个浏览器tab页面，一个浏览器窗口，reload/刷新会保持会话

  2. 复制当前会话作为新会话，会以为是sessionStorage也可以共享的错觉，两个页面的sessionStorage是相互独立的，只是打开的新页面clone了原有页面的sessionStorage而已。可以看下面试官：你确定多窗口之间sessionStorage不能共享状态吗？？？

  3. 针对第二点，有一些情况不会复制

    a. Chrome 89的版本，Stop cloning sessionStorage for windows opened with noopener，而a标签_blank默认 rel=“noopener” ，所以a标签需要加入rel=“opener” 而才能像window.open(“同源页面”)这种方式新开的页面会复制之前的sessionStorage <a href="http://..." target="_blank" rel="opener">Link</a>
    b. 实践中发现浏览器中一个页面内嵌入到iframe中（与主项目跨域，非localhost的形式访问），里面的window.open即便打开的是跟iframe内嵌页面是同域的也不会复制sessionStorage，localStorage也不共享。其原因是window.open打开的页面是否跨域不取决于内嵌页面，而在于主项目，主项目是否与window.open是同域

localhost的访问形式。localStorage是共享的，sessionStorage是会在原来的基础上

非localhost的域名，localStorage是互不影响的，sessionStorage不复制

window.open打开的页面是否跨域不取决于内嵌页面，而在于主项目，主项目是否与window.open是同域

个人笔记记录 2021 ~ 2025