浏览器存储策略解析（三）Local/sessionStorage实战：如何查看本地浏览器上数据
物理意义上的localStorage/sessionStorage在哪里
我们都知道，localStorage存于本地，sessionStorage存于会话，这是见名知意可以得到的。但是在物理层面他们究竟存储在哪里呢？
localStorage和sessionStorage一样，是存储在用户本地计算机的硬盘上。在不同浏览器中，存储的位置不同
以chrome为例，所有的localStorage和sessionStorage在这个路径下：
C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default
打开看看
这就是localStorage/levelDb下的文件，其中存储的是以键值对形式存储的数据。每次使用的时候，内存上就是在这些地方进行存取的。
但是很可惜，不能直接打开看看里面存了什么。想要打开lb文件需要特殊的levelDB工具才行。
他俩是什么对象的属性呢？看这个内存路径，不能再一目了然了吧。
他们是存在于Window对象的
window上的存储对象
学过js的朋友都知道，js的bom顶级对象就是windows，包含了与浏览器交互的所有对象。那么在js的角度，localstorage和sessionStorage就是在他身上的。
对象支持的方法
类似数据库，它基本支持这几种：增/删/改/查
增-存数据
windows.localStorage.setItem(键，值）;
windows.sessionStorage.setItem(键，值）;
//windows也可以省略
localStorage.setItem(键，值）;
sessionStorage.setItem(键，值）;即可存。
需要注意的是，它仅仅支持一个键和一个值一一对应，其中键和值都 只能是 字符串类型。
那如果我要存储一个对象类型的数据呢？
很简单，用jQuery转化一下就行了。
const men = {
height: 180,
weight: 70
}
sessionStorage.setItem(key, JSON.stringify(men));
当然，如果你觉得这么些可能不够优美，也可以将这个方法封装处理一下
// 1. 创建men对象
const men = {
height: 180,
weight: 70
}
// 2. jQuery风格的封装
const $ = {
// 存储方法
setStorage: function(key, value) {
if (typeof value === 'object') {
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
return this; // 返回this实现链式调用
},
// 获取方法
getStorage: function(key) {
let value = localStorage.getItem(key);
try {
return JSON.parse(value);
} catch(e) {
return value;
}
},
// 删除方法
removeStorage: function(key) {
localStorage.removeItem(key);
return this;
}
}
// 3. 使用示例
// 存储数据
$.setStorage('menInfo', men);
// 获取数据
const getMen = $.getStorage('menInfo');
console.log(getMen); // {height: 180, weight: 70}
// 链式调用示例
$.setStorage('menInfo', men)
.setStorage('otherKey', 'otherValue')
.removeStorage('otherKey');
// 存储多个数据
$.setStorage('user1', {height: 175, weight: 65})
.setStorage('user2', {height: 182, weight: 75});
// 获取数据
const user1 = $.getStorage('user1');
console.log(user1.height); // 175查-看数据
既然是字符串肯定是类似字典存储的。所以无论是sessionStorage还是localStorage取得值的形式都是用键去查。
localStorage.getItem(键）;
sessionStorage.getItem(键);当然了取的时候直接取出来的也是json字符串形式，是需要转化的。
改
这里的改数据就相当于将原来那个键所对应的值覆盖掉了。而对于字典或类似字典的数据来说，键是微医的，所以这里就相当于增数据了。
三种写法
localStorage.setItem(键，值);
localStorage[键]=值
localStorage.键=值
感谢伟大的简洁的js，这要是用c++写的用起来就痛苦多了。
删
依旧是三种写法
localStorage.removeItem(键);
delete localStorage[键];
delete localStorage.键实战演练
这个时候我们就会想到，我怎么知道存了哪些数据进去？总不能下个文件解析器每次都从磁盘里找吧。这个时候，我们的控制台就有大用了。
打开应用选项我们就能看见，哇，localStorage&sessionStorage。
打开一个看一下
可以看见，他会根据你的网址将你此时存储下来的localStorage/sessionStorage以键值对展示出来，可以说是一目了然。甚至还贴心的提供了过滤，清除等选项。有了这个再也不怕闭着眼睛乱存啦。
localStorage/sessionStorage缺点
和cookie相比他们已经好太多了，但是它的缺点也是很致命的：还是太原始了一点，网站一多，数据结构一复杂，就难以招架了。特别是localStorage是本地数据，也就是你如果不手动给localStorage写一个过期时间，不把他清理掉，他就会永远，永远，永永远远的留在你的硬盘里。这往往会导致一些鸡零狗碎的问题，比如说数据过期，版本控制不兼容，存储冗余庞杂，甚至信息泄露。当然这些我们可以在代码里手动用定时器等方式设置过期时间，但是他们都面临这同一个问题：太不优美了。
所以，我们当然是有更好的更现代化的工具选择的：indexDB。下一章我们来讲讲indexDB。
原文地址：https://blog.csdn.net/m0_74117421/article/details/143598370
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！