建设银行网站怎么交学费,品牌建设经验做法,做网站兼容ie,引流获客工具物理意义上的localStorage/sessionStorage在哪里
我们都知道#xff0c;localStorage存于本地#xff0c;sessionStorage存于会话#xff0c;这是见名知意可以得到的。但是在物理层面他们究竟存储在哪里呢#xff1f;
localStorage和sessionStorage一样#xff0c;是存储…物理意义上的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.键
实战演练
这个时候我们就会想到我怎么知道存了哪些数据进去总不能下个文件解析器每次都从磁盘里找吧。这个时候我们的控制台就有大用了。 打开应用选项我们就能看见哇localStoragesessionStorage。
打开一个看一下 可以看见他会根据你的网址将你此时存储下来的localStorage/sessionStorage以键值对展示出来可以说是一目了然。甚至还贴心的提供了过滤清除等选项。有了这个再也不怕闭着眼睛乱存啦。
localStorage/sessionStorage缺点
和cookie相比他们已经好太多了但是它的缺点也是很致命的还是太原始了一点网站一多数据结构一复杂就难以招架了。特别是localStorage是本地数据也就是你如果不手动给localStorage写一个过期时间不把他清理掉他就会永远永远永永远远的留在你的硬盘里。这往往会导致一些鸡零狗碎的问题比如说数据过期版本控制不兼容存储冗余庞杂甚至信息泄露。当然这些我们可以在代码里手动用定时器等方式设置过期时间但是他们都面临这同一个问题太不优美了。
所以我们当然是有更好的更现代化的工具选择的indexDB。下一章我们来讲讲indexDB。
