一篇文章搞懂Cookie, sessionStorage 和 localStorage

#前端实习

主要是最近在实习，想趁着这个机会多记录一下自己没注意，或者是遗漏的知识点。这回主要写的是Cookie，sessionStorage还有localStorage的相关内容，去网上查找了下别的大神写的文章然后还有自己合并总结了一下，主要是自己记录一下这个实习过程，还有方便自己之后的回顾。

具体描述：

在进行网页开发的过程中，我们有时候会需要把一些数据存储在客户端（浏览器）。在存资料到浏览器的方式中，最常用到的就是cookie和localStorrage 和sessionStorage，这三者都可以用来存储数据，但是有着不同的使用情况和限制。

三者概念描述：

一、Cookie

什么是Cookie？

Cookie是Web服务器生成并且发送至Web服务器的小型信息文件。Web浏览器在预定义的时间段内或在用户在网站上的会话期间存储收到的Cookie。他们将相关的Cookie附加到用户今后向Web服务器提出的任何请求中

Cookie帮助网站了解用户的情况，使网站能够提供个性化的用户体验。例如，一些电子商务网站使用Cookie来了解用户在其购物车中放了什么东西。然后cookie还可以用于维护安全，比如Cookie身份验证

在互联网上使用的Cookie也称之为”HTTP Cookie”，是通过HTTP协议发送的

Cookie的种类

会话Cookie

会话Cookie帮助网站追踪用户的会话，会话Cookie在用户的会话结束后（退出网站上的账户或退出网站时）被删除，会话Cookie没有到期日期，这向浏览器标明。他们应该在会话结束时立即被删除

持久性Cookie

与会话Cookie不同，持久性Cookie在用户的浏览器最终保持预定的时间长度，可能是一天、一周、几个月、甚至几年。持久性Cookie总是包含一个到期的日期

身份验证Cookie

身份验证Cookie有助于管理用户会话；当前用户通过浏览器登录账户时，就会生成身份验证Cookie。他们通过账户信息与Cookie标识符字符串联系起来，确保敏感信息的被传递给正确的用户会话。

追踪Cookie

追踪Cookie由追踪服务产生，他们用于记录用户的活动，浏览器在下次加载使用该追踪服务的网站时，将该记录发送给相关的追踪服务。

僵尸Cookie

字如其名，僵尸Cookie在被删除后会重新生成。僵尸Cookie在浏览器的典型Cookie存储位置之外还创建自己备份版本，它们使用这写备份在被删除后重新出现的浏览器中。僵尸Cookie有时会被不道德的广告网站利用，甚至被网络攻击者使用。

二、localStorage

localStorage是一种Web存储技术，允许用户在浏览器中以键值对的形式存储数据。

特点：

1.永久存储: 只要不删代码，不干什么别的，localStorage的数据是一直存在的，不会因为浏览器关闭等原因会清楚。

2.localStorage会将第一次请求的数据直接存储到本地，这个相当于一个5M大小的前端数据库

3.存储方式：采用key、value的键值对的方式，value的值必须是字符串类型

4.全局的公共对象: 在所有的同源窗口中都是共享的

局限性：

1.因为浏览器的原因，localStorage的存储大小是不同意i的，而且只有IE8版本以上的浏览器才支持这个属性。

2.localStorage在隐私模式下是不可读取的

3.localStorage本质上是对字符串的读取，如果存储内容过多会造成页面卡顿。

4.localStorage无法被爬虫获取

llocalStorage是一个全局对象，提供了一下方法来操作存储的数据：

1. setItem(key , value): 将一个键值对存储到localStorage中。key和value都必须是字符串
2. GetItem(key): 根据key从localStorage中获取存储的值。如果key不存在，则返回null。
3. RemoveItem(key): 根据key从localStoreage中存储的值
4. Clear():  清楚localStorage存中的所有数据

简单示例:

// localStorage 存入数据

// 存储数据

localStorage.setItem('username', 'Alice');

// 获取数据

const username = localStorage.getItem('username');

console.log(username); // 输出：Alice

// 删除数据

localStorage.removeItem('username');

// 检查数据是否已被删除

console.log(localStorage.getItem('username')); // 输出：null

// 清除所有数据

localStorage.clear();

注意:由于localStorage的限制（例如：同源策略），通常只适用于存储不敏感的，非关键性的数据。

三、sessionStorage

sessionStorage是html5新增的一个临时会话存储对象，用于临时保存同一窗口（或标签页的数据）

特点:

1. 数据时效性: 页面会话在浏览器打开期间一直保持
2. 页面共享: 在新建的标签或者窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文（！IMPORTANT）
3. 独立性: 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage;
4. 存储方式; 采用key、value的方式，value的值必须是字符串类型
5. 存储限制: 不同浏览器限制不同，目前主流的浏览器是5MB

简单示例：

/// 获取sessionStorage长度（只读属性）

sessionStorage.length;  

// 通过key存储值

sessionStorage[key] = value;  

// 存储值

sessionStorage.setItem(key, value);

// 直接通过key查找值

sessionStorage[key];

// 查找值

sessionStorage.getItem(key);

// 删除值

sessionStorage.removeItem(key);

// 清空

sessionStorage.clear();

// 获取指定key值，查询不到返回null

sessionStorage.key(index);

// 可通过此方法获取所有储存key值

Object.keys(sessionStorage);  

使用场景：

sessionStorage主要适用于现在流行的单页应用程序(SPA: single page web application )，方便在各个模块进行传值。

页面共享详细讲解

该特性描述: 在新标签或者窗口打开一个页面时。会复制顶级浏览器会话的上下文作为新会话的上下文。

示例举例: 有一个当前页面A，在A页面跳转到B页面(B页面与A页面必须满足同源策略)；

此时A页面的sessionStorage信息会复制一份传递给B页面( 深层复制 )，此时的两个页面都会由相同的sessionStorage信息，但是都是互不干扰的

综上所述: 在某些特定的场景的下新开的页面会复制之前的页面的sessionStorage，但是不是每个窗口都可以共享数据。

Tips:

同源策略：

同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制；关于这一点我们后面会举例说明。如果缺少了同源策略浏览器的安全使用会受到很大的影响。可以说web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

深层复制： 深度复制就是将引用成员指向的对象也进行复制。实际的过程是创建新的引用成员指向的对象，然后复制对象中所包含的数据。

四、三者的异同

使用方式:

cookie: 第一次用户浏览器在发送请求过后，服务器会在回应的标头中,添加一个Set-Cookie 的选项并将cookie放入到回应中，送回用户浏览器端后，会存储在本地，此外cookie会在用户浏览器下一次发送请求时，一同被携带并发送回服务器上

localStorage、sessionStorage：这两者都是使用键与值(key-value) 的方式存储在用户本地端。

使用场景

cookie因为会被自动夹带在HTTP请求中，所以常使用在需要辨别用户的场景。

localStorage因为容量比cookie大得多切不容易被删除，使用场景相对来讲要宽广的多，例如: 跨页面的数据传递，需要长期保存的数据

sessionStor age则是因为Expires周期较短，适用于单词使用会需要用到的数据，例如: 表单资料保存

生命周期

cookie:可以透过Expires 标明失效时间，或Max-Age 标明有效时长，没有设置的话，默认是关闭浏览器之后失效。

LocalStorage: 除非用户端手动进行删除操作，或者是删除代码，否额将会永久保存

SessionStorage: 在每次关闭该页面，或者说是关闭浏览器之后就会自动清楚

存放的数据大小

cookie：4KB左右

localStorgae、sessionStorage: 5MB~10MB左右（根据浏览器决定）

HTTP 请求

Cookie: 每次请求都会被夹带在HTTP header中，所以如果使用过多可能会带来许多问题

localStorage、sessionStorage: 仅会存在客户的浏览器端，不参与请求的过程

增加内容: 如何增加cookie的安全性？

cookie因为会被自动夹带在HTTP请求中，传送给服务器，因此需要考量到安全性的问题

· Secure : 加上Secure可以确保只有在以加密的请求通过HTTPS协议时，才会传送给服务器

· HttpOnly :加上 HttpOnly， 可以避免JS的Document.cookie方法获得HttpOnly cookies ， HttpOnly cookies 只会被传送到服务器端，此方法可以避免跨网站脚本攻击(XSS)