“这是我参与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 一个量级，理论上这个容量是没有上限的。
总结
新手如有不足请指正，谢谢！
