“这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战”
浏览器的本地存储主要分为Cookie
、WebStorage
、IndexDB
,其中WebStorage
又可以分为localStorage
和sessionStorage
本文主要介绍localStorage
localStorage
localStorage有一点跟Cookie一样,就是针对一个域名,即在同一个域名下,会存储相同的一段localStorage。
不同于Cookie的区别:
容量。localStorage 的容量上限为5M,相比于Cookie的 4K 大大增加。当然这个 5M 是针对一个域名的,因此对于一个域名是持久存储的。 只存在客户端,默认不参与与服务端的通信。这样就很好地避免了 Cookie 带来的性能问题和安全问题。
可以定时清除的localStorage
这个方式可以用在存储token上,比如设置一天之后清空token缓存
1.首先我们需要自定义localStorage的setItem和getItem事件
//在Storage.prototype原型上重写setItem
Storage.prototype.setExpire = (key, value, expire) => {
let obj = {
data: value,
time: Date.now(),
expire: expire
};
//localStorage 设置的值不能为对象,转为json字符串
localStorage.setItem(key, JSON.stringify(obj));
}
//在Storage.prototype原型上重写getIte
Storage.prototype.getExpire = key => {
let val = localStorage.getItem(key);
if (!val) {
return val;
}
val = JSON.parse(val);
if (Date.now() - val.time > val.expire) {
localStorage.removeItem(key);
return null;
}
return val.data;
}
2.使用
直接调用 localStorage.setExpire("token", {token:'token'}, 1000*60*60*24);
前两个参数和localStorage平常使用一样,最后一个为你要多久清除这个缓存
然后调用我们重写的setExpire方法会多存入两个参数,一个为当前时间time
和我们写入的expire
当我们需要获取缓存中的token时,就会调用我们重写的方法getExpire
此时会进行时间比较Date.now() - val.time > val.expire
当现在时间减去上回我们存入token的时间,如果大于我们自定义要多久清除缓存的时间就会进行缓存清除,此时我们就完成了localStorage
定时清除缓存的功能。
Cookie
Cookie 最开始被设计出来并不是为了做本地存储。而是弥补HTTP在状态管理上的不足
http协议是一个无状态协议,客户端向服务器发送请求,服务器返回响应,就这样结束了,那下次请求服务器怎么知道客户端是谁?
这样Cookie 就产生了
Cookie 本质上就是浏览器里面存储的一个很小的文本文件。向同一域名下发送请求,都会携带相同的Cookie,服务器拿到Cookie进行解析,便能拿到客户端的状态。
Cookie 就是用来做状态存储的,但是它有很多缺陷:
容量缺陷。Cookie的体积上只有4kb, 只能用来存储少量信息 性能缺陷。Cookie紧跟域名,不管域名下某个地址是否需要Cookie,请求都会携带上完整的Cookie,随着请求数的增多,其实会造成性能的浪费,因为请求携带了很多不必要的内容。 安全缺陷。Cookie是以纯文本的形式在浏览器和客户端中传递,很容易被非法用户截取,然后进行一系列的篡改,在 Cookie 的有效期内重新发送给服务器,这是相当危险的。另外,在HttpOnly为 false 的情况下,Cookie 信息能直接通过 JS 脚本来读取。
sessionStorage
sessionStorage和localStorage有一个本质的 区别,那就是sessionStorage只是会话级别的存储,并不是持久化存储。会话结束,也就是页面关闭,这部分sessionStorage就不复存在了.
应用场景
可以对表单数据进行维护,将表单信息存储在里面,可以保证即使页面刷新也不会让之前的表单信息丢失 可以用它存储本次浏览记录。如果关闭页面后不需要这些记录,用sessionStorage就再合适不过了。事实上微博就采取了这样的存储方式。
IndexedDB
IndexedDB是运行在浏览器中的非关系型数据库, 本质上是数据库,绝不是和刚才WebStorage的 5M 一个量级,理论上这个容量是没有上限的。
总结
新手如有不足请指正,谢谢!