浏览器缓存方式cookie、session、sessionStorage 和 localStorage 区别

深藏阁楼爱情的钟 2022-10-31 00:38 200阅读 0赞

## 1.cookie ##

由服务端生成，保存在客户端（由于前后端有交互，所以安全性差，且浪费带宽）  
**存储大小有限（最大 4kb )**  
存储内容只接受 String 类型  
**保存位置：**  
若未设置过期时间，则保存在 内存 中，浏览器关闭后销毁  
若设置了过期时间，则保存在 系统硬盘 中，直到过期时间结束后才消失（即使关闭浏览器）  
数据操作不方便，原生接口不友好，需要自己封装  
**应用场景：**  
判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）  
保存登录时间、浏览次数等信息

## 2.session ##

是后端关心的内容，依赖于 cookie（sessionID 保存在cookie中）  
保存在服务端  
存储大小无限制  
支持任何类型的存储内容  
保存位置：服务器内存，若访问较多会影响服务器性能

## 3.webStorage ##

webStorage 是 html5 提供的本地存储方案，包括两种方式：**sessionStorage** 和 **localStorage**。相比 cookie 这种传统的客户端存储方式，webStorage 有许多优点：

保存在客户端，不与服务器通信，因此比 cookie 更安全、速度更快  
存储空间有限，但比 cookie 大（***5MB***)  
仅支持 String 类型的存储内容（和 cookie 一样）  
html5 提供了原生接口，数据操作比 cookie 方便

setItem(key, value) 保存数据，以键值对的方式储存信息。
    getItem(key) 获取数据，将键值传入，即可获取到对应的value值。
    removeItem(key) 删除单个数据，根据键值移除对应的信息。
    clear() 删除所有的数据
    key(index) 获取某个索引的key

**localStorage**  
持久化的本地存储，浏览器关闭重新打开数据依然存在（除非手动删除数据）。  
应用场景：长期登录、判断用户是否已登录，适合长期保存在本地的数据。  
浏览器窗口关闭后数据被销毁。  
应用场景：敏感账号一次性登录。

## 总结 ##

综上所述，我们可以知道，cookie 和 webStorage（ localStorage、sessionStorage ）是前端工程师关心的内容，session 是后端关心的内容。  
cookie 存储量小、安全性差、数据操作接口不友好，而 webStorage 存储量较大、安全性较高、数据接口友好。  
若要持久的存储方式，推荐使用 localStorage  
若要一次性会话的存储，推荐使用 sessionStorage