浏览器信息存储方式

Cookie和Session的关系

关于Cookie的具体使用我们可以见这篇登录的前后端合作博客，这里我们只从理论方面来讨论。
打开浏览器的控制台 -> Application tab页 -> Storage -> Cookies我们可以看到当前url下存储的所有Cookie，这些Cookie记录了我们的一些信息，当我们清除掉Cookie之后，可能需要重新登录这个网站。
通俗的来讲，我们说Cookie存储了用户信息。但是，你会发现，你看见的Cookie的键值对是一串接近于乱码的字符串。为什么？这就涉及到了Session。
Session保存在服务器端，服务器关闭则Session清空，但一般服务器不会直接关闭，关闭也会把它先存起来。用户登录的时候随机一个SessionID，然后用Cookie保存SessionID。通过这个SessionID去找到对应的信息。
写成伪代码大概是这个样子：

SessionID = 随机数
Sessions[SessionID] = 用户信息
Set-Cookie: xxx=SessionID

读取的时候

get Cookie xxx
Sessions[xxx]得到用户信息

为什么要这样麻烦？找到你的Cookie，修改它的值。如你所见，Cookie的值可以被用户修改。如果说Cookie里存了邮箱，然后服务器通过这个邮箱去拿到用户的隐私信息，那么只要张三知道李四的邮箱，就可以通过修改自己Cookie里的邮箱，拿到李四的隐私信息。所以要用随机数——sessionID。随机数在很大的程度上保护了用户的隐私信息。
Session存在服务器端，对用户不可见，用户没有办法进行修改。我们随机一个SessionID，Sessions[SessionID] = 用户信息用这样一个键值对来存储用户信息。
Cookie只用来存储SessionID，所以你看到的Cookie基本上都是一串接近于乱码的字符串。

Cookie和Session使用

Cookie的使用：

1. 用户登录，服务器拿到用户信息，通过Set-Cookie给客户端一串字符串
2. 客户端拿到这段字符串之后，存到本地。每次访问相同域名的时候都会带上这段字符串，相当于一个身份标识。
3. Cookie会在本地保存一段时间之后自动过期。
4. 前端不要读写Cookie，用localStorage做持久化存储。

Cookie设置过期时间：

1. 如果不设置的话会自动在浏览器关闭之后删除Cookie
2. 设置过期时间（Expires），比如Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2021 07:28:00 GMT;
3. 设置有效期（Max-Age），比如Set-Cookie: id=a3fWa; Max-Age=1000;

删除Cookie：

1. 图形界面删除
   f12进入控制台 -> Application -> Storage -> Cookies -> clear all
2. 代码删除
   获取Cookie然后把过期时间设为现在或者过去。

Session的使用：

1. 用户登录，服务器拿到用户信息之后，生成一个随机数SessionID，在Session对象里面生成一个SessionID与用户信息的键值对，然后通过Cookie给客户端返回这个SessionID
2. 客户端拿到SessionID之后，存到本地。下次再访问相同域名的时候带上这个SessionID给服务器。
3. 服务器再次拿到SessionID之后会在Session对象里去找这个SessionID对应的用户信息。
4. 服务器在这块内存里存储了所有的Session信息。

LocalStorage与SessionStorage

LocalStorage的使用

localStorage是html5(所有新的技术统称为html5)提供的一个API，一般用来做本地的持久化存储，在LocalStorage之前，一旦刷新页面，这个页面上的所有东西全部会被销毁，不会保存下来。而LocalStorage会保存在本地的某个文件里。典型的使用场景是在用户第一次进入这个网页的时候给出提示信息：在页面进来之前读一下localStorage确认是否已经提示过，如果没有的话给出提示同时记录下我已经提示过了，如果提示过了的话就啥也不做。

localStorage.setItem("aaa","bbb")
localStorage.getItem("aaa")
localStorage.clear()
// localStorage只能存string，存别的会自动转化成string

LocalStorage和SessionStorage的特征

LocalStorage：

1. LocalStorage与HTTP无关
2. HTTP不会带上LocalStorage的值
3. 只有相同域名的页面才能互相读取LocalStorage（浏览器带的功能）
4. 每个域名localStorage最大存储量为5M左右
5. 常用场景：记录有没有提示过用户等一些没用的信息。不能记录密码等敏感信息。
6. 永久有效，除非用户清理缓存（Chrome浏览器中按住ctrl+shift+delete，高级/Cookie及其他网站数据，清除数据）

SessionStorage：

1. 和localStorage差不多
2. 会自动过期，关闭窗口之后看浏览器啥时候清除（基本是立即清除）

Cookie、LocalStorage和Session

Cookie的本质是HTTP协议的一个内容（Cookie是http头），每次向浏览器发送http请求的时候都会带上Cookie，最大为4k左右。
localStorage的本质是浏览器上的一个hash表，是一个api，用来存一些没什么用的信息，与http没有关系，最大为5M左右，与Cookie的相同之处在于都存储在本地。
Session的本质是服务器上的一个hash表，一般来说是基于Cookie实现，用来存储用户的隐私信息。

没什么用的记录：Session也可以不基于Cookie，用localStorage存储SessionID，然后通过POST请求把SessionID传给服务器
SessionStorage和LocalStorage的过期时间不同。
Cookie的过期时间一般和SessionStorage相同，但是可以后台设置。

HTTP缓存

Cache-Control

Cache-Control和Cookie一样，是HTTP协议的一个东西。Cache-Control用来加快请求的速度，使用max-age来设置多长时间内不发送新的请求。
Cache-Control: max-age=<seconds>表示在多少秒内不接受相同的请求，直接用之前的那个，浏览器从内存/硬盘中获取之前的缓存。
浏览器控制台打开，Network/Disable cache如果勾选上表示不从缓存里拿数据，直接发送请求。
只有URL完全相同浏览器才会选择去获取之前的缓存，因此在实际使用的时候，可以设置一个很长时间的过期值（十几二十年的），然后通过修改URL让用户拿到最新的数据（./css/style.css?version=001）。也因此首页作为入口文件，不能设置 Cache-Control , 不然网站拿不到最新的 URL 值，用户在很长一段时间内永远没有办法获取最新的代码（浏览器貌似会自动禁用，但我们不能指着浏览器来修复自己代码的错误）。

Expires

以前用的，用来加快请求的速度，和 Cache-Control 的区别在于设置的不是多久过期，而是设置什么时候过期，是一个确切的时间点。而且这个时间点用的是电脑的本地时间，如果你的电脑时间设置不对的话可能会出现一些问题。比如过期时间是2040/1/1 12:03:43，而你本地的时间设置成了2041/5/8 12:12:12，那么每次都会进行重新请求。
如果设置了 Cache-Control , Expires 会被忽略。

ETag

MD5 是一种摘要算法，用来对比两个文件的信息。对一个文件使用 MD5 计算一下，可以得到一串字符串，如果两个文件完全相同，那么得到的字符串也相同。所以常用来进行文件的比对。ETag就是基于 MD5 的。
如果网页设置了ETag，那么发送HTTP请求的时候，会带一个对本地缓存中的文件进行 MD5 之后的字符串，然后与我们请求的服务器端的那个文件进行比对。如果相同则服务器不返回值，浏览器直接拿本地的缓存；如果不相同则返回新的文件。
所以 ETag 和 Cache-Control 的区别在于，Cache-Control 如果是在时间内的话会直接不发送请求，而 ETag 每次都会发送请求，但是有可能不带数据回来（不从服务器端下载文件）。

打赏