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

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