客户端浏览器JS存储sessionStorage

304 阅读3分钟

这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

上一篇文章对客户端存储的 Web Storage 的两个 API作了简单理解, 并探究了 用的较多的 localStorage的用法即代码示例, 在移除全部的时候要注意

不知道还记不记得第一次实际上手开发项目时的处境遇到的问题, 记得有13个表单, 还是有些小麻烦的, 需求是用户填写表单部分问题后可能没有提交, 然后再来填写, 就是这么简单的需求就给难住了有没有, dl提示使用 localstorage存一下. 这里回顾重温一下JS中的存储相关的知识点

浏览器 JavaScript 存储

在浏览器客户端, 用的比较多的要数 Web Storage API了.当然还有其他相关存储. 在本地存储一些信息(比如最常用的登录相关信息/表单信息/输入历史等), 除了我们比较熟悉的 cookie, Web Storage 有两个常见的方法: sessionStorage 和 localStorage

sessionStorage

sessionStorage 使用的较多的可能就是当前页的表单输入, 文本输入, 搜索相关了.

sessionStorage 的相关注意事项:

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

sessionStorage 语法: (跟 localStorage 一样, )

// 参数根据方法的不同而不同: 比如 直接清除所有就不用传参了
myStorage = sessionStorage.方法('键名', '值');

sessionStorage 的值

sessionStorage 的值是一个可被用于访问当前源( origin )的本地存储空间的 Storage 对象

  1. 访问

    访问当前域名下的本地 Storage 对象,并通过 Storage.setItem() 增加了一个数据项目: 保存数据到 sessionStorage

sessionStorage.setItem('second', '这里存储的一些信息只能用于当前标签页(当前会话):注意使用方式及数据安全性');
  1. 读取:

    用于读取 上面 sessionStorage 存储的 second 项,如下:

let second = sessionStorage.getItem('second');
  1. 移除一个键值对:

    用于移除一个 sessionStorage 的 second 项,如下:

sessionStorage.removeItem('second');
  1. 移除所有:

    用于移除所有的 sessionStorage 项,如下:

// 移除所有的 sessionStorage 要慎用.
sessionStorage.clear();

参考文档:

永远不要陷入纠结和内耗当中

永远不要陷入纠结和内耗当中,消磨你的精力同时还让你停留在原地

勇敢的踏出那一步,不管是前进还是后退,对错不重要,你还年轻,有大把机会试错。

以后有的是时间钻牛角尖,现在冲就完了

有时候我们觉得是个绕不过去的坎,对经历过大风大浪的他们来说,不算个啥