你不知道的浏览器的本地存储

·  阅读 619

这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战

浏览器的本地存储主要分为CookieWebStorageIndexDB,其中WebStorage又可以分为localStoragesessionStorage 本文主要介绍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 一个量级,理论上这个容量是没有上限的。

总结

新手如有不足请指正,谢谢!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改