关于缓存的一些真相：Cookie && localStorage && Session Storage 缓存相关

最新推荐文章于 2023-07-06 08:30:42 发布

Judy1623

最新推荐文章于 2023-07-06 08:30:42 发布

阅读量313

点赞数

分类专栏： js 前端知识点文章标签： js缓存

js 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

前端知识点

34 篇文章 0 订阅

订阅专栏

Cookie && localStorage && Session Storage 这三个分别的意思为：

Cookie Cookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于 RFC2109 和 2965 中的都已废弃，最新取代的规范是 RFC6265 [1] 。（可以叫做浏览器缓存）
localStorage 长期储存 localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；
Session Storage 页面会话期间储存

关于前端存储的问题我们难免会遇到 token 存储、代码缓存、图片存储等等。以及可能存在的一系列的问题；
现在，我们就专门从 浏览器存储 入手，来真正的了解缓存存在的场景，以及在日常开发中，我们需要缓存的地方，以及使用缓存会给我们带来哪些优势 or bug。

缓存的初始状态

很久很久之前，还在 web 端开发的时候。那个年代其实前后端分离开发模式非常的少，而且你也得去兼容各个大厂提供的浏览器。那个时候 IE6789 、火狐、谷歌、Safari 等等。多到有些市场份额很少的就直接舍弃掉。从那个年代过来的人应该都记得国产神浏览器 UC （说到这里，眼泪就流了下来 T—T）
好吧，好像扯远了，那个年代的 cookie （饼干、小甜点）在我第一次接触到它的时候，哇~ 我是惊叹的。原来有这种操作？什么操作呢？服务端会在用户登录成功之后接口返回一个 token ，类似秘钥一样的东西，然后前端就会拿到这个token 然后缓存在一个地方，这个地方就是 cookie。然后再次访问需要有登陆态的接口的时候，我们就会 从 cookie 中读取 token，然后在发送 http 请求时候，写进 header 中。后端接受到这个请求以后，就可以获取到这个 token ，然后经过简单验证即可。验证通过了，则进行下一步操作。

好了，下一步。我们就进行详细的 介绍 Cookie

一：cookie

cookie是什么？

Cookie 翻译过来就是饼干、小甜点的意思。
是在 web端常见的存储方式之一，而且在发起 http 请求的时候会自动被带上。但是这个个人建议不要大量的去使用，因为 cookie 会被带入进去 http 的请求内容中。请求包可能会越来越大，导致请求速度慢从而影响用户体验。
说白了。 cookie 就是保存在客户端的一段 字符串。
在这里插入图片描述
cookie可以手动设置，也可以由服务器产生，当客户端（浏览器）向服务器发送请求，服务器会反馈一些信息给客户端，这些信息的key/value值被浏览器作为文件保存在客户端特定的文件夹中。

cookie如何使用？

cookie避免不了使用，那么我们就看一下使用方法吧！

// 存cookie
let setCookie = (name, value, times) = > {
    let date = new Date()
    data.setDate(data.getDate() + times)
    document.cookie = name + '=' + value + ';expires=' + date
} 
    
// 取cookie
let getCookie = (name) => {
    let cookies = document.cookie
    let cookieArr = cookies.split(';')
    for(let i = 0; i < cookieArr.length; i++) {
        let arr = cookieArr[i].split('=')
        if (name == arr[0] ) {
            return arr[1]
        }
    }
    return false
}

//  删除 cookie
let removeCookie = (name) => {
    setCookie(name, '', '-1')
    // 通过建立 cookie 的时间设置，将时间设置提前一天，从而强行让 cookie 失效，最后达到 删除cookie 的目的
}

cookie 使用时注意事项

1） cookie 是有大小限制的，每个cookie 所存放的数据不能超过 4k，如果超过则该属性将返回空字符串。
2）通常我们需要将存放的 value 值进行 escape 编码。然后在使用的时候再用 unescape() 函数，反编码就好了。
3）重要的信息不要放 cookie

那如果存储内容超过 4kb，我们该如何处理呢？

这里我们将分别介绍几种前端存储方式： localStorage， sessionStorage，websql 和indexeddb。

二：localStorage

localStorage是什么？

是被 W3C 标准化之后的网页存储的一种方式，原本是属于 HTML5 的存储方案，后来被独立出来，适用于 IE 8+，FF 2+，Safari 4+，chrome 4+， Opera 10.50+。（意思就是 PC 上和 H5 都可以愉快的使用啦~）

localStorage如何使用？

localStorage.getItem(key)        //获取指定key本地存储的值
localStorage.setItem(key,value)  //将value存储到key字段
localStorage.removeItem(key)     //删除指定key本地存储的值

在这里插入图片描述
1）存储时间： localStorage的存储周期比sessionStorage 长 (这里的 sessionStorage 我们会在下文中介绍到) ，如果用户不清理的话，是可以永久存储的。

2）访问限制：另外也有访问的限制， localStorage 与 sessionStorage虽然相似，但是访问限制却不尽相同，localStorage的访问域默认设定为设置localStorage的当前域，其他域名不可以取。这点与sessionStorage相同，但是与sessionStorage不同的是，localStorage设定后，新开tab是可以访问到的。

3）大小限制及检测标准建议对于每个domain，localStorage大小为5M，达到限制时浏览器可以去问用户是否允许增加存储空间。

4）可以用来干嘛？ 因为 localStorage 可以长期存储，只要用户不刻意去清除。那么我们往往可以提前存入一些用户需要访问，而且还是需要服务器加载的文件等等。这样一方面可以加快页面加载速度。另外一方面也可以减少服务器压力。

二：sessionStorage

这里说的 sessionStorage 和 localStorage 的区别就在于，用户关掉了浏览器的当前页。 sessionStorage 存储的数据就销毁掉了。

1.用法

sessionStorage.getItem(key)         //获取指定key本地存储的值
sessionStorage.setItem(key,value)   //将value存储到key字段
sessionStorage.removeItem(key)      //删除指定key本地存储的值

2.访问限制
当前 tab 存储的 sessionStorage，只能在当前 tab页才能访问到，如果打开同样域名的 tab 去访问之前 tab页存储的 sessionStorage 是无法读取到的。

所以 sessionStorage 是一个 tab 级别的存储。

3.可以做什么？
最常见的一个功能就是，如果我们在视频网站看视频不小心刷新了某个我们正在播放视频的页面。这个时候视频的进度条会提示你上次播放时间，是否继续上次的播放，其实这个时间就可以保存到 sessionStorage 。可能这只是比较牵强的一个例子。大概就是这么使用

三：websql与indexeddb

1）访问权限：
indexedDB 和 websql 在访问权限上和 localStorage 是一致的。均是只能子啊创建数据库下的域名才能访问，而且不能指定访问域名。

存储时间：同样是永久，除非用户清除数据
可以做什么？

当我们是在做一个离线应用，或者webapp的时候，可以考虑使用本地数据库中存取数据。如果不存大量的数据的话，其实localStorage就够用了。亦或者，你想把一张用户的皮肤图片之类的大量数据存入客户端缓存起来，localStorage已经不够用了的话，也可以尝试一下websql与indexeddb。