【面试题】详解Cookie、localStorage、sessionStorage区别

三者基本概念

localStorage

sessionStorage

安全性的考虑

Cookie、localStorage、sessionStorage、indexedDB对比

应用场景

Token一般放在哪里？？？

放在Cookie

放在localStorage or sessionStorage

【面试题】详解Cookie、localStorage、sessionStorage区别

三者基本概念

Cookie

cookie 确实非常小，它的大小限制为5KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

只要有效期和作用域，浏览器每次访问的时候都会将Storage载入到内存里

sessionStorage

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

只要有效期和作用域，浏览器每次访问的时候都会将Storage载入到内存里

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。

关闭窗口后，sessionStorage即被销毁

安全性的考虑

需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。

因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。

Cookie、localStorage、sessionStorage、indexedDB对比

特性	Cookie	localStorage	sessionStorage	indexedDB
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除	永久
存放数据大小	4K左右	一般为5MB		无限制
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信		异步
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持		原生接口

应用场景

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。

曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~

而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。

如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

原文地址

JS 详解 Cookie、 LocalStorage 与 SessionStorage - 狂奔的小马扎 - 博客园 (cnblogs.com)https://www.cnblogs.com/minigrasshopper/p/8064367.html

Token一般放在哪里？？？

在下面的这一篇文章中，讲述了Token的使用，案例里面的Token时放在 Header请求头 的authorization 里面

【面试题】深入理解Cookie、Session、Token的区别_面向鸿蒙编程的博客-CSDN博客https://blog.csdn.net/weixin_43715214/article/details/127939439

那么问题来了，除了放在 authorization 中，还可以放在什么地方？

我查看了网络上的解释，大致是有3种方法

1、存储在localStorage中，每次调用接口的时候都把它当成一个字段传给后台

2、存储在cookie中，让它自动发送，不过缺点就是不能跨域

3、拿到之后存储在localStorage中，每次调用接口的时候放在HTTP请求头的Authorization字段里面。token 在客户端一般存放于localStorage、cookie、或sessionStorage中。

放在Cookie

支持Cookie的开发人员会强烈建议不要将敏感信息（例如JWT)存储在localStorage中，因为它对于XSS毫无抵抗力。放在cookie中看似看全，看似“解决”（因为仍然存在XSS的问题）一个问题，却引入了另一个问题（CSRF）

放在localStorage or sessionStorage

支持Storage的一派则认为：撇开localStorage的各种优点不谈，如果做好适当的XSS防护，收益是远大于风险的。localStorage具有更灵活，更大空间，天然免疫 CSRF的特征。Cookie空间有限，而JWT一半都占用较多字节，而且有时你不止需要存储一个JWT。