这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战
不知道还记不记得第一次实际上手开发项目时的处境遇到的问题, 记得有13个表单, 还是有些小麻烦的, 需求是用户填写表单部分问题后可能没有提交, 然后再来填写, 就是这么简单的需求就给难住了有没有, dl提示使用 localstorage存一下. 这里回顾重温一下JS中的存储相关的知识点
浏览器 JavaScript 存储
作为客户端, 在本地存储一些信息(比如最常用的登录相关信息/表单信息/输入历史等), 除了我们比较熟悉的 cookie, 用的比较多的要数 Web Storage API了. Web Storage 有两个常见的方法: sessionStorage 和 localStorage
localStorage 和 sessionStorage 的区别
两个API 都是一个Document 源(origin)的对象 Storage, 通过浏览器会话存储数据到本地浏览器, 两者相类似.
应注意,无论数据存储在 localStorage 还是 sessionStorage ,它们都特定于页面的协议。
区别:
-
使用 localStorage 存储 的数据可以长期保留; 而当页面会话(浏览器窗口或标签页)关闭结束, 也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。
-
localStorage 中的键值对总是以字符串的形式存储。 (注意: 和JS对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).
localStorage
localStorage 语法:
// 参数根据方法的不同而不同: 比如 直接清除所有就不用传参了
myStorage = localStorage.方法('键名', '值');
localStorage 的值
localStorage 的值是一个可被用于访问当前源( origin )的本地存储空间的 Storage 对象
-
访问
访问当前域名下的本地 Storage 对象,并通过
Storage.setItem()增加了一个数据项目
localStorage.setItem('first', '小阿天已经登录了, 这里存储的一些登录信息:');
-
读取:
用于读取 上面 localStorage 存储的 first 项,如下:
let first = localStorage.getItem('first');
-
移除一个键值对:
用于移除一个 localStorage 的 first项,如下:
localStorage.removeItem('first');
-
移除所有:
用于移除所有的 localStorage 项,如下:
// 移除所有的 localStorage 要慎用.
localStorage.clear();