本地存储

cookie、localStorage、sessionStorage

Previousscript标签中defer和async Next拖拽

Last updated 1 year ago

本地存储

cookie、localStorage、sessionStorage

cookie的出现主要是解决http无状态带来的一些问题

主要特征：

服务器生成，存储在客户端
每次的请求会默认携带上同源的cookie
过期时间可以设置

重要参数：

domain：cookie所属的域名
path：页面级别的访问限制，如果设置了path，只有同域同页面下的cookie才共享
expires：具体的过期时间点，逐渐废弃，由max-age代替
max-age：过期时间段，以秒为单位
- 负数：会话结束即失效
- 0：删除cookie
- 正数：n秒后失效
secure：只能被 HTTPS 协议加密过的请求发送给服务端
httpOnly：拒绝http携带之外的方式访问，比如通过JavaScript脚本无法访问
sameSite：请求的url和当前页面url不一致时是否允许携带cookie，防止攻击

Storage

api:

// 保存数据到 Storage
Storage.setItem('key', 'value');

// 从 Storage 获取数据
let data = Storage.getItem('key');

// 从 sessionStorage 删除保存的数据
Storage.removeItem('key');

// 从 Storage 删除所有保存的数据
Storage.clear();

localStorage

数据长期存储，没有过期时间，只能用户手动清除
各个tab页间数据共享，注意数据一致性的问题

sessionStorage

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话
通过脚本，在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文
打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage，和父级页面完全独立
关闭对应浏览器标签或窗口，会清除对应的 sessionStorage

如何理解第2点？

父页面：

子页面：

演示步骤：

第1步：跳转到子页面

通过<a>标签的方式跳转到子页面，子页面的控制台输出：parent_1:null
通过window.open的方式跳转到子页面，子页面的控制台输出：parent_1:123

第2步：点击父页面新增sessionStorage按钮，然后点击各个子页面的获取新sessionStorage按钮

通过<a>标签的方式跳转到子页面，子页面的控制台输出：parent_2:null
通过window.open的方式跳转到子页面，子页面的控制台输出：parent_2:456

总结：

通过<a>标签方式打开的子页面和父级页面完全独立，sessionStorage始终不共享
通过window.open方式打开的子页面会复制父页面的sessionStorage，父级页面后续更新的sessionStorage和子级页面共享同步

参考：

Previousscript标签中defer和async Next拖拽

Last updated 1 year ago

cookie的出现主要是解决http无状态带来的一些问题

主要特征：

服务器生成，存储在客户端
每次的请求会默认携带上同源的cookie
过期时间可以设置

重要参数：

domain：cookie所属的域名
path：页面级别的访问限制，如果设置了path，只有同域同页面下的cookie才共享
expires：具体的过期时间点，逐渐废弃，由max-age代替
max-age：过期时间段，以秒为单位
- 负数：会话结束即失效
- 0：删除cookie
- 正数：n秒后失效
secure：只能被 HTTPS 协议加密过的请求发送给服务端
httpOnly：拒绝http携带之外的方式访问，比如通过JavaScript脚本无法访问
sameSite：请求的url和当前页面url不一致时是否允许携带cookie，防止攻击

Storage

api:

// 保存数据到 Storage
Storage.setItem('key', 'value');

// 从 Storage 获取数据
let data = Storage.getItem('key');

// 从 sessionStorage 删除保存的数据
Storage.removeItem('key');

// 从 Storage 删除所有保存的数据
Storage.clear();

localStorage

数据长期存储，没有过期时间，只能用户手动清除
各个tab页间数据共享，注意数据一致性的问题

sessionStorage

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话
通过脚本，在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文
打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage，和父级页面完全独立
关闭对应浏览器标签或窗口，会清除对应的 sessionStorage

如何理解第2点？

父页面：

子页面：

演示步骤：

第1步：跳转到子页面

通过<a>标签的方式跳转到子页面，子页面的控制台输出：parent_1:null
通过window.open的方式跳转到子页面，子页面的控制台输出：parent_1:123

第2步：点击父页面新增sessionStorage按钮，然后点击各个子页面的获取新sessionStorage按钮

通过<a>标签的方式跳转到子页面，子页面的控制台输出：parent_2:null
通过window.open的方式跳转到子页面，子页面的控制台输出：parent_2:456

总结：

通过<a>标签方式打开的子页面和父级页面完全独立，sessionStorage始终不共享
通过window.open方式打开的子页面会复制父页面的sessionStorage，父级页面后续更新的sessionStorage和子级页面共享同步

参考：