Session、Cookie、sessionStorage、localStorage的区别及应用场景

2023-09-29 05:57:19

session、Cookie、sessionStorage、localStorage均为前端存储技术，但各有不同的特性和应用场景。

1. Cookie
Cookie是一种小文件，由服务器创建并存储在客户端（如浏览器）上，用于在会话期间存储信息。Cookie具有过期时间，过期后浏览器会自动删除Cookie。Cookie最常用的场景是用于用户身份识别、保存用户设置、跟踪用户行为等。例如，当用户登录网站时，网站会创建并发送一个Cookie到用户的浏览器，其中包含用户的登录信息。当用户再次访问该网站时，浏览器会自动发送该Cookie到服务器，服务器即可通过Cookie识别用户身份。

2. Session
Session是服务器端保存的一段信息，用于标识和管理用户会话。Session数据保存在服务器上，并在会话期间存在。当用户关闭浏览器或注销时，Session数据将被销毁。Session最常用的场景是用于管理用户会话状态，如购物车、聊天记录等。例如，当用户向购物车中添加商品时，网站会创建一个Session，其中保存着用户的购物车信息。当用户再次访问购物车时，网站会通过Session获取购物车信息并显示给用户。

3. sessionStorage
sessionStorage是HTML5引入的一种本地存储技术，与Cookie和Session不同，sessionStorage数据存储在浏览器中，不会发送到服务器。sessionStorage数据在会话期间存在，当用户关闭浏览器时，sessionStorage数据将被销毁。sessionStorage最常用的场景是用于存储临时数据，如表单数据、页面状态等。例如，当用户正在填写表单时，网站会将表单数据存储在sessionStorage中。当用户关闭浏览器后，表单数据将被销毁。

4. localStorage
localStorage是HTML5引入的另一种本地存储技术，与sessionStorage类似，localStorage数据也存储在浏览器中，但localStorage数据不会在会话期间销毁。localStorage数据在浏览器中一直存在，直到用户手动删除或浏览器清除缓存。localStorage最常用的场景是用于存储永久数据，如用户设置、离线数据等。例如，当用户设置网站的主题时，网站会将主题信息存储在localStorage中。当用户再次访问该网站时，网站会从localStorage中获取主题信息并应用到页面中。

区别

cookie可以存储在服务器和浏览器中，而sessionStorage和localStorage只能存储在浏览器中。
cookie具有过期时间，过期后浏览器会自动删除Cookie。sessionStorage和localStorage没有过期时间，数据会在浏览器中一直存在，直到用户手动删除或浏览器清除缓存。
session数据存储在服务器上，sessionStorage和localStorage数据存储在浏览器中。
session数据在会话期间存在，当用户关闭浏览器或注销时，Session数据将被销毁。sessionStorage和localStorage数据在浏览器中一直存在，不会在会话期间销毁。
cookie可以被服务器端和客户端同时访问，sessionStorage和localStorage只能被客户端访问。