持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
写在前面
一般而言，当面试官发出此问题，我们一般会这么回答，有localStorage和sessionStorage，区别在于一个不会被删除，一个当关闭浏览器时， 则会被删除。其实，这么回答可以，但是稍显不足，本文就来总结一下本地存储方式以及对比。 其实本地缓存主要分为cookie、Web Storage（localStorage和sessionStorage）、IndexDB
描述
- cookie通常由服务端生成，发送到客户端，即在浏览器和服务器之间来回传递，通常可以用于标识客户端，能够让使用无状态HTTP协议的服务器记住状态信息。
- sessionStorage对象是当前源下，存储会话数据的Storage实例，当页面关闭时其也会消失，主要以键值对的方式存储数据。
- localStorage 也是获取当前源存储的 Storage 对象。存储的数据可以跨浏览器会话访问。
- IndexedDB 是一种底层 API，能存储大量结构化数据，用于在客户端存储大量的结构化数据
区别
| 特性 | cookie | sessionStorage | localStorage | IndexedDB |
|---|---|---|---|---|
| 生命周期 | 可以设置失效时间，默认为浏览器会话结束时清除 cookie | 页面会话结束时清除 sessionStorage | 持久存储 | 永久保存 |
| 使用场景 | 会话状态管理（如用户登录状态），个性化设置，浏览器行为跟踪 | 用来存储生命周期和它同步的会话级别的信息 | 可以用简单的键值对来存取的数据存储任务，都可以使用 localStorage 来处理 | 用于在客户端存储大量的结构化数据 |
| 存储空间最大值 | 4KB | 一般为 5MB | 一般为 5MB | 取决于用户设备容量和浏览器限额设置 |
| 特点 | 简单易用，不占用服务器资源，可设置过期时间，但会被添加在每个请求中，增加了流量消耗 | 只能被当前标签页访问，且刷新标签页或恢复浏览器页面时仍会保留 | 没有过期时间 | 支持二进制存储：不仅可以存储字符串，也可以存储 File 或 Blob 对象。且存储空间大 |
