一文读懂cookie、sessionStorage和localStorage的区别

一文读懂cookie、sessionStorage和localStorage的区别,读完后,面试相关的问题就基本没问题了由于`HTTP是一种无状态的协议`，服务器单从网络连接上是无法知道客户身份的。这时候`服务器`就需要给`客户端`颁发一个`cookie`，用来确认用户的身份。

陈坚泓

14042人浏览 · 2020-11-15 23:32:44

陈坚泓 · 2020-11-15 23:32:44 发布

cookie、sessionStorage和localStorage的区别

cookie
session
localStorage
sessionStorage
- localStorage与sessionStorage的区别
cookie 、sessionStorage与localStorage的区别
对比复习
推荐阅读

你越是认真生活，你的生活就会越美好!

cookie

什么是cookie?

由于HTTP 是一种无状态的协议，服务器单从网络连接上是无法知道客户身份的。这时候服务器就需要给客户端颁发一个cookie，用来确认用户的身份。

简单的说，cookie 就是客户端保存用户信息的一种机制，用来记录用户的一些信息。

原理: web服务器通过在http 响应消息头增加 Set-Cookie 响应头字段将 Cookie 信息发送给浏览器，浏览器则通过在 http 请求消息中增加 Cookie 请求头字段将Cookie 回传给 web服务器。

cookie的构成

服务器端向客户端发送 Cookie 是通过HTTP 响应报文实现的，在响应头 Set-Cookie 中设置需要向客户端发送的 cookie ，cookie 格式如下：

set-cookie: access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwic3ViIjo4MDU3NywibmJmIjoxNjA1NDUwMzM2LCJzY29wZXMiOiJbXSIsImV4cCI6MTkxNjQ5MDMzNiwiaWF0IjoxNjA1NDUwMzM2LCJqdGkiOiJlNjAwMGE4ZGEyZGU0MTE0OGY0MjFjNDM0ZDU0OGIzMyJ9.InBBdO2vwpkerEu8U_Ysp5ob0kHpJFIWHb_oicz06k7-42xD9iJlWQ1XTnALxKiViHx-aoCK7Ti58f8QTF5Zkg; Max-Age=1920902400; Expires=Mon, 29-Sep-2081 06:25:36 GMT; Domain=yo.com.cn; Path=/

有利星球 – 免费领取淘宝购物优惠券
在这里插入图片描述
其中 name=value 是必选项，其它都是可选项。 Cookie 的主要构成如下：

name :一个唯一确定的 cookie 名称。通常来讲 cookie 的名称是不区分大小写的。
value: 存储在 cookie 中的字符串值。最好为 cookie 的 name 和 value 进行url编码
domain: cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个 cookie 信息。这个值可以包含子域(如：m.yo.com.cn)，也可以不包含它(如：.yo.com.cn，则对于yo.com.cn的所有子域都有效)。

可以到下面这个网址注册登录看看
有利星球 – 免费领取淘宝购物优惠券
path: 表示这个cookie 影响到的路径，浏览器跟会根据这项配置，向指定域中匹配的路径发送cookie。
expires:失效时间，表示 cookie 何时应该被删除的时间戳(也就是，何时应该停止向服务器发送这个 cookie )。
- 如果不设置这个时间戳，浏览器默认在页面关闭时即将删除所有cookie；不过也可以自己设置删除时间。这个值是GMT时间格式。如果客户端和服务器端时间不一致，使用 expires 就会存在偏差。
- 如果给cookie设置一个过去的时间，浏览器会立即删除该cookie
max-age: 与expires作用相同，用来告诉浏览器此cookie多久过期（单位是秒），而不是一个固定的时间点。正常情况下，max-age的优先级高于expires。
HttpOnly: 服务器告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。
但在http请求中仍然会携带这个cookie。
- 注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
secure: 安全标志，指定后，只有在使用SSL链接时候才能发送到服务器，如果是http链接则不会传递该信息。

这里强调一点，是 Cookie 的不可跨域名性
很多网站都会使用 Cookie ，不同浏览器采用不同的方式保存 Cookie ，而且每个网站的 Cookie 只能够被对应的网站使用。
意思就是说当浏览器访问 baidu 时，只会带 baidu 的 Cookie ，而不会带其他网站的Cookie，这就是Cookie的不可跨域名性 。
Cookie 在客户端是由浏览器来管理的。浏览器可以保证各个网站只能操作各个网站的Cookie，从而保证用户的隐私安全。

cookie的特点

Cookie并不提供修改、删除操作

如果要修改某个 Cookie，只需要新建一个同名的 Cookie，添加到 response 中覆盖原来的Cookie。
如果要删除某个 Cookie ，只需要服务端新建一个同名的 Cookie ，并将 maxAge 设置为0，并添加到 response 中覆盖原来的 Cookie。注意是0而不是负数。负数代表其他的意义。
注意：修改、删除Cookie时，新建的Cookie除value、maxAge之外的所有属性，例如name、path、domain等，都要与原Cookie完全一样。否则，浏览器将视为两个不同的Cookie不予覆盖，导致修改、删除失败。

封装setCookie & getCookie

/*
* 设置cookie
* name:cookie名称
* value: 对应cookie的值
* value: 对应cookie的值
* iDay: cookie的有效期,单位天数
*/
function setCookie (name, value, iDay = 1, domain = '') {
  var oDate = new Date()
  oDate.setDate(oDate.getDate() + iDay)
	const hostSplit = location.host.split('.')
  hostSplit.shift()
  document.cookie = `${name}=${value};expires=${oDate.toGMTString()};path=/`
  document.cookie = `${name}=${value};expires=${oDate.toGMTString()};path=/;domain=.${hostSplit.join('.')}`
}

setCookie('jianhong', 'helloWrold!', 2)

在这里插入图片描述

// 获取指定name的cookie
function getCookie (name) {
  let arr1 = document.cookie.split('; ')
  let i = 0;
  for (i = 0; i < arr1.length; i++) {
    var arr2 = arr1[i].split('=')
    if (arr2[0] == name) {
      return arr2[1]
    }
  }
  return ''
}

getCookie('jianhong')  // name

session

什么是session?

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。

客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。
客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了(服务端通过全局唯一的 session_id 判断是哪个用户，后端一般缓存在 redis 或者其他存储结构中)

session的工作步骤

因为 HTTP 协议是无状态的，Session 不能依据 HTTP 连接来判断是否为同一个用户。

于是服务器向用户的浏览器发送了一个名为 JESSIONID的Cookie，它的值是Session的 id 值。这个id可以让 Session 依据 Cookie 来识别是否是同一个用户。

简单来说：Session 之所以可以识别不同的用户，依靠的就是Cookie，所以说session 基于 Cookie

该Cookie是服务器自动颁发给浏览器的，不用我们手工创建。该Cookie的maxAge值默认是-1，也就是说仅当前浏览器使用，不将该Cookie存在硬盘中，并且各浏览器窗口间不共享，关闭浏览器就会失效。

工作步骤：
将客户端称为 client，服务端称为 server

1、产生 sessionID：session 是基于 cookie 的一种方案，所以，首先要产生 cookie。client 第一次访问 server，server 生成一个随机数，命名为 sessionID，并将其放在响应头里，以 cookie 的形式返回给 client，client 以处理其他 cookie 的方式处理这段 cookie。
大概是这样：cookie：sessionID=135165432165
2、保存 sessionID： server 将要保存的数据保存在相对应的 sessionID 之下，再将 sessionID 保存到服务器端的特定的保存 session 的内存中（如一个叫 session 的哈希表）
3、使用 session： client 再次访问 server，会带上首次访问时获得的值为 sessionID 的 cookie，server 读取 cookie 中的 sessionID，根据 sessionID 到保存 session 的内存寻找与 sessionID 匹配的数据，若寻找成功就将数据返回给 client。

session的有效期

Session保存在服务器端。为了获得更高的存取速度，服务器一般把Session放在内存里。每个用户都会有一个独立的 Session 。如果 Session 内容过于复杂，当大量客户访问服务器时可能会导致内存溢出。因此，Session 里的信息应该尽量精简。

Session生成后，只要用户继续访问，服务器就会更新Session的最后访问时间，并维护该 Session 。用户每访问服务器一次，无论是否读写 Session ，服务器都认为该用户的 Session “活跃（active）”了一次。

由于会有越来越多的用户访问服务器，因此Session也会越来越多。为防止内存溢出，服务器会把长时间内没有活跃的 Session 从内存删除。

这个时间就是Session的超时时间。如果超过了超时时间没访问过服务器， Session 就自动失效了。

cookie与session的区别

Cookie 数据存放在客户端，Session数据放在服务器端
Cookie 的安全性一般，他人可通过分析存放在本地的 Cookie 并进行 Cookie 欺骗。在安全性第一的前提下，选择Session更优。重要交互信息比如权限等就要放在 Session 中，一般的信息记录放 Cookie 中
单个 Cookie 保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个 Cookie ，而Session原则上没有限制
Session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用 Cookie。
Session 的运行依赖Session ID，而 Session ID 是存在 Cookie 中的，也就是说，如果浏览器禁用了 Cookie，Session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 Session ID，也就是地址重写）

localStorage

什么是localStorage?

localStorage 是 HTML5 提供的一个 API，他本质上是一个hash（哈希表），是一个存在于浏览器上的 hash（哈希表）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的 UI 上清除 localStorage 信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

localStorage使用方法

localStorage 和 sessionStorage 使用时使用相同的API：

localStorage.setItem("key","value");	//以“key”为名称存储一个值“value”

localStorage.getItem("key");	//获取名称为“key”的值

localStorage.removeItem("key");	//删除名称为“key”的信息。

localStorage.clear();	//清空localStorage中所有信息

localStorage 是一个保存于客户端的哈希表，可以用来保存本地的一些数据。并且不会因为刷新而释放，所以，可以使用 localStorage 来实现变量的持久化存储

localStorage的特点

localStorage 与 HTTP 没有任何关系，所以在HTTP请求时不会带上 localStorage 的值
只有相同域名的页面才能互相读取 localStorage，同源策略与 cookie 一致
不同的浏览器，对每个域名 localStorage 的最大存储量的规定不一样，超出存储量会被拒绝。最大存5M 超过5M的数据就会丢失。而 Chrome 10MB 左右
常用来记录一些不敏感的信息
localStorage 理论上永久有效，除非用户清理缓存

sessionStorage

sessionStorage 的所有性质基本上与 localStorage 一致，唯一的不同区别在于：

sessionStorage的生命周期是在仅在当前会话下有效。
sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。
但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立打开同一个窗口同一个页面，sessionStorage 也是不一样的。

localStorage与sessionStorage的区别

localStorage生命周期是永久的，除非被清除，否则永久保存，而sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除

相同点可以参考 localStorage 的特点
这里再强调一下，这两个存储方式用来存放数据大小一般为5MB，并且仅在客户端（即浏览器）中保存，不参与和服务器的通信。

cookie 、sessionStorage与localStorage的区别

在这里插入图片描述

对比复习

本地储存localStorage与cookie的区别

1）cookie在浏览器与服务器之间来回传递
sessionStorage 和 localStorage 不会把数据发给服务器，仅在本地保存
2）数据有效期不同
cookie只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage 始终有效，长期保存
3）cookie 数据还有路径的概念，可以限制 cookie 只属于某个路径下
存储大小也不同，每个cookie数据不能超过4k， sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大
4）作用域不用
sessionStorage不在不同的浏览器窗口中共享
localStorage在所有同源窗口中都是共享的
cookie也是在所有同源窗口中都是共享的

WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便

cookie、session和 localStorage 的区别

1）cookie的内容主要包括：名字、值、过期时间、路径和域，路径与域一起构成 cookie 的作用范围。若不设置时间，则表示这个 cookie 的生命期为浏览器会话期间，关闭浏览器窗口，cookie 就会消失，这种生命期为浏览器会话期的cookie被称为会话cookie
2）会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把 cookie 保存到硬盘上，关闭后再打开浏览器这些 cookie 仍然有效直到超过设定的过期时间。对于保存在内存里的 cookie ，不同的浏览器有不同的处理方式。
3）当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session 标识（称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含 session id，则为客户端创建一个 session 并且生成一个与此 session 相关联的 session id ， session id 的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个 session id 将被在本次响应中返回给客户端保存。保存这个 session id 的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。

cookie和session的区别

1）cookie数据存放在客户的浏览器上，session数据放在服务器上
2）cookie 不是很安全，别人可以分析存放在本地的 cookie 并进行 cookie 欺骗，考虑到安全应当使用 session
3）session 会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用 cookie
4）单个 cookie 保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个 cookie
5）建议将登录信息等重要信息存放为 session ，其他信息如果需要保留，可以放在 cookie 中
6）session保存在服务器，客户端不知道其中的信心；cookie保存在客户端，服务器能够知道其中的信息
7）session中保存的是对象，cookie中保存的是字符串
8）session 不能区分路径，同一个用户在访问一个网站期间，所有的 session 在任何一个地方都可以访问到，而 cookie 中如果设置了路径参数，那么同一个网站中不同路径下的 cookie 互相是访问不到的

web Storage 和 cookie 的区别

1）Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的，cookie 的大小是受限的，并且每次请求一个新的页面的时候 cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可跨域调用
2）web storage拥有setItem,getItem,removeItem,clear等方法，不像 cookie 需要前端开发者自己封装 setCookie，getCookie
3）但是 cookie 也是不可或缺的，cookie 的作用是与服务器进行交互，作为http 规范的一部分而存在的，而 web Storage 仅仅是为了在本地“存储”数据而生
sessionStorage、localStorage、cookie 都是在浏览器端存储的数据，其中sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的同窗口中，始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后，sessionStorage 就会被销毁，同时“独立”打开的不同窗口，即使是同一页面，sessionStorage 对象也是不同的
4）Web Storage的好处
- 减少网络流量：一旦数据保存在本地之后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要的来回传递
- 快速显示数据：性能好，从本地读数据比通过网络从服务器上获得数据快得多，本地数据可以及时获得，再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示
- 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用 sessionStorage 非常方便

浏览器本地存储与服务器端存储的区别

1）数据既可以在浏览器本地存储，也可以在服务器端存储
2）浏览器可以保存一些数据，需要的时候直接从本地存取，sessionStorage、localStorage和cookie都是由浏览器存储在本地的数据
3）服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据
4）服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端，服务器端也可以保存用户的临时会话数据，服务器端的 session 机制，如 jsp 的 session 对象，数据保存在服务器上
5）服务器和浏览器之间仅需传递 session id 即可，服务器根据 session id 找到对应用户的 session 对象，会话数据仅在一段时间内有效，这个时间就是 server端设置的 session有效期
6）服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分别保存在用户各自的浏览器中，浏览器端一般只用来存储小数据，而非服务可以存储大数据或小数据服务器存储数据安全一些，浏览器只适合存储一般数据