前端存储方式总结

我不是女神ヾ 2023-01-23 12:57 215阅读 0赞

### 文章目录 ###

*   *  1. Cookie存储
     *   *  1.1 Cookie的格式
         *  1.2 Cookie的原理
         *  1.3 Cookie的常见属性
         *  1.4 Cookie用途
         *  1.5 Cookie的缺陷
         *  1.6 session和cookie的区别
     *  2. 本地存储
     *   *  2.1. window.sessionStorage
         *  2.2. window.localStorage

--------------------

## 1. Cookie存储 ##

Cookie诞生之初的作用就是解决HTTP的无状态请求，用来记录一些用户相关的一些状态。

Cookie是一小段文本信息，伴随着用户请求在 Web 服务器和浏览器之间传递，其大小限制在4k左右（不同浏览器略有不同）。

### 1.1 Cookie的格式 ###

因为浏览器提供了 `cookie 属性`给 JavaScript，所以可以通过 `document.cookie` 来访问这个页面中的cookie。

![img][]

这是一串字符串，仔细观察，我们可以发现规律。每个 cookie 都以名/值对的形式，即 `name=value`，名称和值都必须是`URL`编码的，且两对`cookie`间以`分号和空格`隔开。（ps：千万不要忘了空格，特别是在获取某个 cookie 时）

### 1.2 Cookie的原理 ###

![img][img 1]

第一次访问网站的时候，浏览器发出请求，服务器响应请求后，会在响应头里面添加一个Set-Cookie选项，将cookie放入到响应请求中，在浏览器第二次发请求的时候，会通过Cookie请求头部将Cookie信息发送给服务器，服务端会辨别用户身份，另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

Cookie的设置方式主要有两种：

**1、服务器端设置**

服务器通过发送一个名为 Set-Cookie 的HTTP头来创建一个cookie，作为 Response Headers 的一部分。如下图所示，每个Set-Cookie 表示一个 cookie（如果有多个cookie,需写多个Set-Cookie），每个属性也是以名/值对的形式（除了secure），属性间以分号加空格隔开。格式如下：

![img][img 2]

注意，通过 Set-Cookie 指定的可选项(域、路径、失效时间、secure标志)只会在「浏览器端」使用，它们都是服务器给浏览器的指示，以指定何时应该发送cookie。这些参数不会被发送至服务器端，只有name和value才会被发送。

**2、浏览器端设置**

浏览器端设置cookie的格式和Set-Cookie头中使用的格式一样。如下：

document.cookie = "name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]"

### 1.3 Cookie的常见属性 ###

(1) Name/Value：设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌。

(2) Expires属性：设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，此时cookie将停留在客户端的内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效 。

(3) Path属性：定义了Web站点上可以访问该Cookie的目录。

(4) Secure属性：指定是否使用[HTTPS][]安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的[SSL][]证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到[SSL证书][SSL 1]无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。由于许多用户缺乏安全意识，因而仍可能连接到Pharming攻击所伪造的网站 \[3\] 。

(5) HTTPOnly 属性 ：用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过[XMLHTTP][]对象读取[HTTP][]响应中的Set-Cookie头 。

### 1.4 Cookie用途 ###

Cookie 可以作为全局变量，这是它最大的一个优点。它最根本的用途是 Cookie 能够帮助 Web 站点保存有关访问者的信息，以下列举cookie的几种小用途。

1）**记住密码，保存用户登录信息**。这应该是最常用的了。当您访问一个需要登录的界面，例如微博、百度及一些论坛，在登录过后一般都会有类似"下次自动登录"的选项，勾选过后下次就不需要重复验证。这种就可以通过cookie保存用户的id。

2）**创建购物车**。购物网站通常把已选物品保存在cookie中，这样可以实现不同页面之间数据的同步(同一个域名下是可以共享cookie的)，同时在提交订单的时候又会把这些cookie传到后台。

3）**跟踪用户行为**。例如百度联盟会通过cookie记录用户的偏好信息，然后向用户推荐个性化推广信息，所以浏览其他网页的时候经常会发现旁边的小广告都是自己最近百度搜过的东西。这是可以禁用的。

### 1.5 Cookie的缺陷 ###

1、Cookie 不够大

Cookie的大小被浏览器限制在4KB左右，只能用来存取少量的信息，对于复杂的存储需求来说是不够用的。

这里需注意：各浏览器的cookie每一个name=value的value值大概在4k，所以4k并不是一个域名下所有的cookie共享的, 而是一个name的大小。

2、过多的 Cookie 会带来巨大的性能浪费Cookie 是紧跟域名的。同一个域名下的所有请求，都会携带 Cookie。大家试想，如果我们此刻仅仅是请求一张图片或者一个 CSS 文件，我们也要携带一个 Cookie 跑来跑去（关键是 Cookie 里存储的信息并不需要），这是一件多么劳民伤财的事情。Cookie 虽然小，请求却可以有很多，随着请求的叠加，这样的不必要的 Cookie 带来的开销将是无法想象的。

3、Cookie不适合存储一些隐私或敏感信息。因为Cookie会在网络中传递，很容易被劫持，劫持后可以伪造请求，执行一些危险操作（删除或者修改信息）。

### 1.6 session和cookie的区别 ###

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。

如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。  
2、session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 session\_id）  
3、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗考虑到安全应当使用session。  
4、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。  
5、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。(Session对象没有对存储的数据量的限制，其中可以保存更为复杂的数据类型)

为了弥补 Cookie 的局限性，让“专业的人做专业的事情”，Web Storage 出现了。

## 2. 本地存储 ##

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，**HTML5** 提供了两种在客户端存储数据的新方法：localStorage和sessionStorage，挂载在window对象下。

**本地存储特性**：

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象 JSON.stringify() 编码后存储

### 2.1. window.sessionStorage ###

会话存储只能应用于页面会话期间，当关闭页面或者浏览器的时候，会话存储中的数据将会被自动清除

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以**键值对**的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

删除所有数据（慎用！）：

sessionStorage.clear()

### 2.2. window.localStorage ###

本地存储永远不会过期，即使浏览器关闭还会存在，同源的本地存储可以共享。**同源是指协议、域名和端口相同**。

1、声明周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

删除所有数据（慎用！）：

localStorage.clear()

\`\`

[img]: /images/20221004/9d4bdbc268174e83b8697f26b6f2e7d2.png
[img 1]: /images/20221004/0152cee2304d4d34a7572e1e417d79eb.png
[img 2]: /images/20221004/573dff9f48184f77a0c9076404820f68.png
[HTTPS]: https://baike.baidu.com/item/HTTPS/285356
[SSL]: https://baike.baidu.com/item/SSL/320778
[SSL 1]: https://baike.baidu.com/item/SSL%E8%AF%81%E4%B9%A6/5201468
[XMLHTTP]: https://baike.baidu.com/item/XMLHTTP/481421
[HTTP]: https://baike.baidu.com/item/HTTP/243074