在前端日常开发中 cookie、webStorage 是我们常用的浏览器缓存方式。但同时说起 cookie、session、sessionStorage 和 localStorage 是不是有些傻傻分不清楚了？本文梳理概括了它们的区别及应用场景，相信对你的面试和实际应用都有一定帮助。

cookie

• 由服务端生成，保存在客户端（由于前后端有交互，所以安全性差，且浪费带宽）
• 存储大小有限（最大 4kb )
• 存储内容只接受 String 类型

• 保存位置：

  • 若未设置过期时间，则保存在 内存 中，浏览器关闭后销毁
  • 若设置了过期时间，则保存在 系统硬盘 中，直到过期时间结束后才消失（即使关闭浏览器）
• 数据操作不方便，原生接口不友好，需要自己封装

• 应用场景

  • 判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）
  • 保存登录时间、浏览次数等信息

设置了过期时间的cookie存在了哪里呢？

Mac: /Users/用户名/Library/caches/Google/Chrome/Default/cache

Windows: C:\Users\用户名\AppData\LocalMicrosoft\Windows\Temporary Internet Files

session

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

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

• 持久化的本地存储，浏览器关闭重新打开数据依然存在（除非手动删除数据）。
• 应用场景：长期登录、判断用户是否已登录，适合长期保存在本地的数据。

存储文件夹：

Mac: /Users/用户名/Library/Application Support/Google/Chrome/Default/Local Stroage

Windows: C:\Users用户名\AppData\Local\Google\Chrome\User Data\Profile\Local Storage

sessionStorage

• 浏览器窗口关闭后数据被销毁。
• 应用场景：敏感账号一次性登录。

总结

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

看完有收获吗？喜欢请点赞支持哦~