前端存储Cookie、Session、LocalStorage 和 SessionStorage

痕迹*

已于 2024-09-17 18:29:30 修改

阅读量874

点赞数 16

文章标签：前端

于 2024-09-17 18:27:34 首次发布

版权

在Web开发中，Cookie、Session、LocalStorage 和 SessionStorage 都用于存储用户数据，以下是它们的区别和联系：

存储位置: 存储在浏览器并发送到服务器。
存储大小: 每个Cookie通常不能超过4KB。
存储时长: 可以手动设置过期时间，默认会话结束后过期。
数据传递: 每次请求时会自动附带在HTTP请求中发送给服务器。
安全性: 可以通过设置HttpOnly和Secure标志来提升安全性，防止JavaScript访问或通过非安全连接传输。
跨域问题：Cookie默认不能跨域。可以通过设置SameSite=None和Secure标志，并指定跨域的domain属性，使Cookie在子域或跨域之间共享。但即便如此，跨顶级域名的共享（例如example.com与anotherdomain.com）仍然受限。

存储位置: 存储在服务器端，浏览器通过Cookie存储Session ID来标识会话。
存储大小: 没有明确限制，取决于服务器配置。
存储时长: 会话结束时（例如，用户关闭浏览器）或当Session超时后数据失效。
数据传递: 通过Session ID管理用户在服务器上的数据，通常Session ID通过Cookie传递。
安全性: 服务器端存储较为安全，用户无法直接访问。
跨域问题：Session ID 是通过Cookie或URL参数传递的，和Cookie一样，默认情况下无法跨域。如果不同的子域共享同一个服务器和Session存储机制，可以通过共享Cookie的方式实现跨子域会话。然而跨顶级域的Session无法共享。

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

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

存储位置: 存储在浏览器的本地，无需与服务器交互。
存储大小: 每个域名可存储约5-10MB的数据。
存储时长: 永久存储，除非用户手动删除或代码清除。
数据传递: 仅在客户端使用，不与服务器通信。
安全性: 数据可通过JavaScript读取，因此要防止XSS（跨站脚本攻击）。
跨域问题：不能跨域，LocalStorage 的数据是基于同源策略，只有在同一域名下才能访问。不同的域名或子域之间无法共享LocalStorage的数据。

Cookie 和 Session 都与服务器交互，Session更适合存储大量敏感数据，而Cookie主要用于存储少量信息和在客户端标识。
LocalStorage 和 SessionStorage 都仅在客户端存储数据，LocalStorage 数据持久存储，而SessionStorage 只在当前会话内有效。