本地存储和会话存储
本文对本地存储和绘画存储有一个清晰的解释
前提
- 在任意网页按F12打开开发者工具
- 这里用一个空白页演示
-
-
点击应用,有的浏览器可能叫Application
-
在存储下面会看到本地存储空间和会话存储空间,这两个存储空间都是以键值对的方式存储数据
-
本地存储和会话存储主要区别在于,关闭浏览器后存储在
会话存储会消失
-
示例
-
使用本地存储(localStorage)
-
在控制台执行如下代码
-
localStorage.setItem("username",'mucd')
-
效果:
-
可以看到已经被存储进来了
-
那么本地存储(localStorage)是什么类型的呢?使用
typeof
来查看一下 -
typeof localStorage
-
本地存储获取键值对
刚才演示了如何设置键值对,那么设置完成后要怎么获取呢?
-
//根据key来获取value let username = localStaorage.getItem("username") console.log(username)
-
-
如果获取一个不存在的key,返回的则是一个null
本地会话存储并且获取数组
很多时候我们希望存储一个数组,但是localStorage有个限制,会将数组转为字符串
-
// 定义ProgrammingLanguage数组 let pl = ['Java', 'Python', 'JavaScript', 'GO+'] // 本地存储存储 ProgrammingLanguage数组 localStorage.setItem('arr', pl);
-
-
可以看到是一个
string
类型的结果,这样是不符合我们的需求的,但是我们要怎么解决呢? -
这里可以使用
JSON.stringify
-
// 定义ProgrammingLanguage数组 let pl = ['Java', 'Python', 'JavaScript', 'GO+'] // 本地存储存储 ProgrammingLanguage数组 localStorage.setItem('arr', JSON.stringify(pl));
-
-
存储ok了,接下来就是获取
-
使用
JSON.parse()
获取 -
let arr = localStorage.getItem("arr") console.log(JSON.parse(arr))
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hyukdCHQ-1648085852210)(C:\Users\mucd\AppData\Roaming\Typora\typora-user-images\1648084662817.png)]
- JSON.stringify:将数组设置为本地存储中的值。
- JSON.parse:从本地存储中获取数组。
清除本地存储
-
清理之前的本地存储
-
清理之后的本地存储
-
localStorage.clear()
-
-
-
这是清除所有的本地存储,如果需要只清除某一个本地存储呢?
-
localStorage.removeItem('username')
-
会话存储
进行和本地存储类似的操作,只需要把localStorage改成sessionStorage
-
示例
-
// 示例1 sessionStorage.setItem('username', 'uiu'); // 示例2 sessionStorage.getItem('username'); // 示例4 let pl = ['Java', 'Python', 'JavaScript', 'GO+'] sessionStorage.setItem('pl',JSON.stringify(pl)); // 示例6 console.log(JSON.parse(sessionStorage.getItem('pl'))); // 示例7 sessionStorage.clear() // 示例8 sessionStorage.removeItem('username');
-
结果存储在会话存储空间
-
-
但是此时我们关闭浏览器再打开,就会发现会话存储空间的数据已经消失了,但是本地存储空间的数据还是存在的。这就是本地存储空间和会话存储空间的区别!
-
-
MDN的解释
-
窗口界面的 localStorage 只读属性允许您访问 Document 来源的 Storage 对象;存储的数据跨浏览器会话保存。
只读 sessionStorage 属性访问当前源的会话存储对象。sessionStorage 类似于 localStorage;不同之处在于,虽然 localStorage 中的数据不会过期,但 sessionStorage 中的数据会在页面会话结束时被清除。