32：第三章：开发通行证服务：15：浏览器存储介质，简介；（cookie，Session Storage，Local Storage）

说明：

（1）简单介绍浏览器存储介质：cookie，Session Storage，Local Storage；

（2）目前为止的、可以确定的几点：

          ● 这些存储介质都是浏览器的，我们要想使用这些存储介质需要浏览器允许；

          ● 我们可以在后端向前端响应的时候，设置cookie；；前端拿到后，可以把其设置到浏览器中；

          ● 然后，目前感觉“Session Storage，Local Storage的设置”，更多是前端需要做的工作；（比如，【把数据存到Session Storage，Local Storage中】、【前端二次请求的时候，不再去请求后端接口，而是去“Session Storage，Local Storage”中取】、【某些情况下，需要删除Session Storage，Local Storage中的内容】等等；；；这些工作，感觉更多是需要在前端代码中编写的）

（3）本篇博客，只是对浏览器存储介质作了一个入门级别的介绍，只是一些皮毛；后续可以参考【localStorage、sessionStorage 和 Cookie 区别及用法】、【localStorage和sessionStorage本地存储】等；

目录

零：本篇博客合理性说明； 

（1）问题阐述；

（2）解决策略；

一：浏览器存储介质：

1.cookie；

2.webStorage；

Session Storage；

Local Storage；

---

零：本篇博客合理性说明； 

（1）问题阐述；

          ● 我们在【31：第三章：开发通行证服务：14：开发【获得用户基本信息，接口】；】，这个接口是用户获取用户基本信息的；

          ● 而在本项目中，几乎在每个页面在加载的时候，很多都会去获取一下用户信息；

          ● 这也意味着，如果就这样的话；；；那么，我们几乎在加载每个页面的时候，前端都会默默的去调用【获取用户基本信息，接口】，以便能获取到用户基本信息；

          ● 那么，如此一来，【获取用户基本信息，接口】的压力就会很大；（因为，我们只要进入了这个网站，刷新页面，点击页面的时候，每个页面都会默默去调用这个接口，，，这个流量是很大的）

          ● 即使如果【获取用户基本信息，接口】没有操作数据库，请求这个接口的流量也是个很大的负担；

……………………………………………………

【获取用户基本信息，接口】主要有两个特点：一是这个接口提供的信息，一般是不太会经常修改的；二是，很多地方都需要这个接口提供的信息，即这个接口的请求流量很大；

（2）解决策略；

          ● 【获取用户基本信息，接口】这个接口查询的是“用户的基本信息”；；；而“用户的基本信息”，往往并不是所有的用户都会频繁的去修改的；

          ● 所以，我们可以把“用户的基本信息”，存储到浏览器上；这样一来，可以减轻接口的压力；

          ● 在我们项目中，我们前端在获取到用户基本信息后，把这个用户基本信息保存在了浏览器的Session  Storage中；

          ● 比如，我们在访问项目，并更改/完善用户信息后，可以看到Session Storage；

          ● 这样一来，在第一次需要“用户基本信息”的时候，其会去实际调用后端的【获取用户基本信息，接口】；；；但是，只要用户不关闭浏览器，当前端页面再需要“用户基本信息”的时候，其就不会再去调用后端的【获取用户基本信息，接口】了，而是直接从Session Storage中获取了；；；；；而这，【获取用户基本信息，接口】的压力就会降低，节省了大量的流量；

---

一：浏览器存储介质，简介；

1.cookie；

（1）cookie可以看做是一种缓存；

（2）在早期的时候，网站中使用的是比较多的；比如本项目的uid和utoken就是保存在cookie中的；通过cookie中保存的数据，前端和后端就可以进行一些数据的交互；

（3）cookie是保存在浏览器中的：

          ● 如果不设置其过期时间，那么cookie是保存在内容中的；如果我们关闭浏览器，那么和这个cookie也就没了；（这其实有点类似session会话的效果）

          ● 如果设置了过期时间，那么cookie是保存在硬盘中的；关闭浏览器后，这个还是存在的；一般，很多网站中，cookie的过期时间设为7天；

（4）cookie只能存字符串内容；；；像对象、List这些，我们需要把其转成JSON字符创，然后再保存的；

（5）cookie只能存【大小<4k左右的字符串】；；；如果一个字符串太大的话，就不能存到cookie中了；

（6）用户在使用浏览器的时候访问某个网站的时候，可以禁用浏览器的cookie；；；如此一来，即使这个网站系统在代码中，有“向浏览器存储cookie”的代码，其也存不了；

在HTML5以后，那么浏览器可以使用webStorage（包括sessionStorage、localStorage），其实也是类似一种数据存储的表现形式，是对cookie的一种改良。

2.webStorage；

Session Storage；

可以这样理解：

          ● 用户打开浏览器，去访问A网站，直到用户彻底关掉浏览器：这个时间内，我们称之为一个会话（session）；

          ● 在这个过程中，浏览器就会针对A网站有一个Session Storage；

          ● 如果A网站的代码中有向Session Storage中存数据的动作，那么数据就会存到Session Storage中去；

          ● 只要我们不关闭浏览器，这些存在Session Storage中的数据就会一直在；；；但是，一旦我们关闭了浏览器，这个会话（session）也就结束了，那么那些存在Session Storage中的数据也就没了；

……………………………………………………

Local Storage；

（1）Local Storage的数据是保存在本地（磁盘）的；；我们关闭浏览器、重启电脑后，这些数据都会在；（这其实也是数据持久化的一种表现）

（2）Session Storage和Local Storage能存【大小在5M左右的数据】，这比cookie大很多；

（3）而且，在安全性上，Session Storage和Local Storage要比cookie好一些；；；cookie会被请求携带的，有可能会有一些cookie篡改、cookie挟持等安全问题；

（4）通过webStroage，大多网站数据进行缓存后，可以更快加载，也能为并发减轻一定压力。