LocalStorage、SessionStorage、Cookie 的共享差异

最近在做一个Pixel的项目,在这个过程中,很多地方都用到了LocalStorageSessionStorageCookie 这三个特性来做本地存储,以往的使用场景都没有此次复杂,所以在使用过程中,也发现了许多和以往认知不同的地方,这些差异其实在官方的文档中都有提及,只是过往均是使用一些常用的点,所以也未曾注意。
常见的比如存储情况等特性,这里不再赘述,仅对共享情况的差异进行对比,这个是我以往较少用到的,此次也发现了诸多的差异之处。这里先放上简单的结论表供参考。

LocalStorage SessionStorage Cookie
同源共享 仅当前标签页且同源共享 同一个主域名且同协议下可以共享

LocalStorage

首先来说LocalStorage,其在同源的情况下是共享的,注意这里是同源。这个其实和平时的认知并没有什么差异,主要是要注意同源和同域名的区别即可。

例子:

dev1.test.comdev2.test.com 下是违反同源策略的,是不能共享的,这个和Cookie是有差异的。

SessionStorage

SessionStorage我原来的认知是错误较多的!在原来的使用中,深度使用较少,基本是以使用其关闭浏览器即清除的特性巨多,会惯性的认为,其他特性与LocalStorage相差无几。

但在使用的过程中发现,虽然其在同源条件下是共享的,但是其条件限制较多,需要同源且同标签页。下面是官方文档的一段特性描述。

  • 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
  • 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookie 的运行方式不同。
  • 打开多个相同的 URL 的 Tabs 页面,会创建各自的 sessionStorage。
  • 关闭对应浏览器标签或窗口,会清除对应的 sessionStorage。

例子:

  1. dev1.test.com/a.html 页面打开 dev1.test.com/b.html ,注意要在当前页面打开,这时候SessionStorage是共享的,如果是新开标签页或者窗口,那么SessionStorage会被清空,这符合官方文档的描述,但因为LocalStorage的思维惯性,我一直以为它在不同标签页间也会共享。

  2. dev1.test.com/a.html 页面打开 dev2.test.com/b.html ,这时候由于非同源,无论是当前页面打开还是新开,都无法共享SessionStorage,这里是符合以往的认知。

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=/;

相关推荐
秋名山大前端6 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug6 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn6 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636026 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4166 小时前
HTML(面试)
前端
excel6 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴6 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy6 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者7 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王7 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html