跨域设置localStorage时，iframe内同源页面与直接访问的localStorage是否隔离？

结论：同源的iframe和直接访问的页面默认共享同一个localStorage，不存在原生的隔离机制

你遇到的「存储不同步」问题，大概率是以下原因导致：

• 第三方存储限制：现代浏览器（Chrome、Firefox、Safari等）默认开启第三方存储拦截机制。当b.com/receive.html作为iframe被a.com嵌入时，属于第三方上下文，浏览器会限制其存储权限，此时iframe的localStorage会被单独隔离（或限制写入），和直接访问b.com的第一方上下文存储不互通。
• 源的细微差异：确认直接访问和iframe加载的地址完全一致——比如是否存在HTTP/HTTPS协议差异，或者子域名不同（b.com和www.b.com属于不同源），这些都会导致localStorage被隔离。
• 浏览器上下文不同：比如iframe在普通窗口，而直接访问用了隐身窗口；或者浏览器缓存导致页面未更新，读取的是旧的存储数据。

验证方法：

• 在b.com/receive.html中添加代码，打印当前localStorage的所有键值：

  console.log('当前存储内容：', Object.assign({}, localStorage));
  

• 先在iframe中写入数据，然后直接访问b.com/receive.html并刷新，查看控制台输出是否一致；同时检查浏览器设置里的「第三方Cookie和网站数据」是否被允许。

内容的提问来源于stack exchange，提问作者lei li