最近在做一个
Pixel的项目，在这个过程中，很多地方都用到了LocalStorage、SessionStorage、Cookie这三个特性来做本地存储，以往的使用场景都没有此次复杂，所以在使用过程中，也发现了许多和以往认知不同的地方，这些差异其实在官方的文档中都有提及，只是过往均是使用一些常用的点，所以也未曾注意。
常见的比如存储情况等特性，这里不再赘述，仅对共享情况的差异进行对比，这个是我以往较少用到的，此次也发现了诸多的差异之处。这里先放上简单的结论表供参考。
| LocalStorage | SessionStorage | Cookie |
|---|---|---|
| 同源共享 | 仅当前标签页且同源共享 | 同一个主域名且同协议下可以共享 |
LocalStorage
首先来说LocalStorage，其在同源的情况下是共享的，注意这里是同源。这个其实和平时的认知并没有什么差异，主要是要注意同源和同域名的区别即可。
例子：
在 dev1.test.com 和 dev2.test.com 下是违反同源策略的，是不能共享的，这个和Cookie是有差异的。
SessionStorage
SessionStorage我原来的认知是错误较多的！在原来的使用中，深度使用较少，基本是以使用其关闭浏览器即清除的特性巨多，会惯性的认为，其他特性与LocalStorage相差无几。
但在使用的过程中发现，虽然其在同源条件下是共享的，但是其条件限制较多，需要同源且同标签页。下面是官方文档的一段特性描述。
- 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
- 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookie 的运行方式不同。
- 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
- 关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。
例子：
-
在 dev1.test.com/a.html 页面打开 dev1.test.com/b.html ，注意要在当前页面打开，这时候
SessionStorage是共享的，如果是新开标签页或者窗口，那么SessionStorage会被清空，这符合官方文档的描述，但因为LocalStorage的思维惯性，我一直以为它在不同标签页间也会共享。 -
在 dev1.test.com/a.html 页面打开 dev2.test.com/b.html ，这时候由于非同源，无论是当前页面打开还是新开，都无法共享
SessionStorage，这里是符合以往的认知。
Cookie
Cookie的特性基本是符合以往认知的，因为之前做一些主域名相同但子域名不同的同步问题上使用较多，其在同一个主域名 间可以跨标签页/窗口 共享，且可以根据使用场景来决定存储时效，但这里要注意一点的是，同一域名下，不同的协议是不可以共享的。 在我的Pixel项目中，我基本是以短期Cookie配合持久存储的LocalStorage来同步本地信息。
例子：
在 dev1.test.com/a.html 页面写入Cookie，在 dev1.test.com/b.html 是可以获取到的，但如果想要在 dev2.test.com/b.html 中获取到，需要在设置的时候配置domin参数和path参数，比如document.cookie="a=1; domain=test.com; path=/;。