解决浏览器存储问题，不得不了解的cookie,localStorage和sessionStorage

Posted 2021-07-23 星期一研究室

浏览器存储方式

• 一、浏览器存储的方式
• 二、cookie、localStorage和sessionStorage
• • 1、cookie、localStorage和sessionStorage是什么？
  • • （1）cookie
    • （2）localStorage
    • （3）sessionStorage
  • 2、cookie、localStorage和sessionStorage的异同点
  • • （1）三者的相同点在于：
    • （2）三者的区别在于：
  • 3、cookie的用途
  • • （1）保存用户登录状态
    • （2）跟踪用户行为
• 三、session和token
• • • （1）Session
    • （2）Token
• 四、结束语

要说浏览器存储的方式，我们听到最多的莫过于就是cookie，localStorage和sessionStorage了。那这三者之前有什么区别，cookie与session、sessionId又有什么关系呢？接下来我们一起来了解一下吧！

一、浏览器存储的方式

特性	cookie	localStorage	sessionStorage	indexedDB
数据生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	4K	5M	5M	无限
与服务端通信	每次都会携带在header中，对于请求性能有一定影响	不参与	不参与	不参与

补充：cookie 原本并不是用来储存的，而是用来与服务端通信的，需要存取请自行封装 api。

而 localStorage 则自带 getItem 和 setItem 方法，使用很方便。

localStorage 注意点：

• localStorage 只能存字符串，存取 JSON 数据需配合 JSON.stringify() 和 JSON.parse() ；

• 遇上禁用 setItem 的浏览器，需要使用 try...catch 捕获异常。

二、cookie、localStorage和sessionStorage

1、cookie、localStorage和sessionStorage是什么？

（1）cookie

• cookie 是一个非常具体的东西，指的就是浏览器里面能永久存储的一种数据，仅仅是浏览器实现的一种数据存储功能。

• cookie 由服务器生成，发送给浏览器，浏览器把 cookie 以kv的形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该 cookie 发送给服务器。

• cookie 的过期时间由客户端设置。若不设置过期时间，则表示这个 cookie 的生命期为浏览器会话期间，关闭浏览器窗口， cookie 就会消失。这种生命期为浏览器会话期的 cookie 被称为会话cookie。如果设置了过期时间，则在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭也会一直有效。

• 会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器后这些 cookie 仍然有效直到超过设定的过期时间。对于保存在内存里的 cookie ，不同的浏览器有不同的处理方式。

• 可用 document.cookie = "" 来设置 cookie 的值。cookie的值是键值对的形式存在，当设置的键一样时，会覆盖掉原先的值。当键不一样时，对进行叠加操作。这里附上一篇我看过觉得比较好理解的关于如何设置cookie的文章，大家可以根据自身需求进行查看~

（2）localStorage

• 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
• 同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效。

（3）sessionStorage

• 浏览器存储的一种形式。

• 仅在当前浏览器窗口关闭前有效，不可能持久保持。

• 在相同浏览器里，如果是在当前页面里面跳转进入一个新的页面，可以共享；而如果是直接打开一个新的页面，不能共享。

2、cookie、localStorage和sessionStorage的异同点

（1）三者的相同点在于：

• 都是保存在浏览器端、且同源的。

（2）三者的区别在于：

• 与服务器通信不同：

  cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存；

  cookie 会随着 http 请求被发送出去，而 loacalStorage 和 sessionStorage 不会随着 http 请求被发送出去。

  cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下。

• 存储大小限制也不同：

  cookie 数据不能超过4K，同时因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据，如会话标识；

  sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

• 数据有效期不同：

  sessionStorage ：仅在当前浏览器窗口关闭之前有效；

  localStorage ：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

  cookie ：只在设置的 cookie 过期时间之前有效，即使窗口关闭或浏览器关闭。

• 作用域不同：

  sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；

  localstorage 和 cookie 在所有同源窗口中都是共享的；

3、cookie的用途

（1）保存用户登录状态

例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面 时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。

cookie 还可以设置过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。

（2）跟踪用户行为

例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。 如果每次都需要选择所在地是繁琐的，当利用了 cookie 后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区 的天气情况。

因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用 cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

三、session和token

（1）Session

举个例子：

• session 从字面上讲，就是会话。这个就类似于你和一个人交谈，你怎么知道当前和你交谈的是张三而不是李四呢？对方肯定有某种特征（长相、身高等等）表明他就是张三。
• session 也是类似的道理，服务器要知道当前发请求给自己的是谁。
• 为了做这种区分，服务器就要给每个客户端分配不同的“身份标识”，这个身份表示也就是我们平常所说的 sessionId 。然后客户端每次向服务器发请求的时候，都带上这个“身份标识”，服务器就知道这个请求来自于谁了。
• 至于客户端怎么保存这个“身份标识”，可以有很多种方式，对于浏览器客户端，大部分情况下都默认采用 cookie 的方式，当然也可以使用 localStorage 和 sessionStorage 存储这个身份标识，大家可以依据自身需求进行使用。
• 需要注意的是， session 为一个会话，当页面不同即使是同一页面打开两次，也被视为同一次会话。
• 服务器使用 session 把用户的信息临时保存在了服务器上，用户离开网站后 session 会被销毁。
• 这种用户信息存储方式相对 cookie 来说更安全，但是 session 有一个缺陷：如果web服务器做了负载均衡，那么下一个操作请求到了另一台服务器的时候 session 会丢失。

综上所述，对session做个总结：

• 当程序需要为某个客户端的请求创建一个 session 时，服务器首先检查这个客户端的请求里是否已包含了一个 session 标识（ 称为 sessionId ），如果已包含则说明以前已经为此客户端创建过 session ，服务器就按照此 sessionId 把其对应的 session 检索出来使用（检索不到，会新建一个）；反之，如果客户端请求不包含 sessionId ，则为客户端创建一个 session 并且生成一个与此 session 相关联的 sessionId ， sessionId 的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个 sessionId 将被在本次响应中返回给客户端保存。保存这个 sessionId 的方式可以采用 cookie ，也可以是 locaStorage 和 sessionStorage ，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。

（2）Token

• 在Web领域基于 Token 的身份验证随处可见。在大多数使用 Web API 的互联网公司中， token 是多用户下处理认证的最佳方式。

• 以下几点特性会让你在程序中使用基于 Token 的身份验证：

  • 无状态、可扩展；
  • 支持移动设备；
  • 跨程序调用；
  • 安全。

• 大部分你见到过的 API 和 Web 应用都使用 token 。例如 Facebook , Twitter , Google , GitHub 等。

四、结束语

cookie、loacalStorage和sessionStorage是面试中老生常谈的问题了。在学习的过程中，要理解好cookie、localStorage和sessionStorage的关系，以及session、sessionId和cookie的关系，只有把它们这几个之间的关系弄明白了，自己才不会一直深陷在一个关系杂圈中。

关于浏览器存储的内容就讲到这里啦！如有疑问或文章有讲的不好的地方欢迎评论区评论或私信我交流~

• 关注公众号 星期一研究室 ，不定期分享学习干货

• 如果这篇文章对你有用，记得点个赞加个关注再走哦~