前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍本地存储的四种方式，以及他们的比较和应用。
一、本地存储的方式
1、cookie
- Cookie类型为小型文本文件，指某些网站为了辨别用户身份而存储在用户本地终端上的数据，是为了解决HTTP无状态导致的问题。
- Cookie文件一般不超过4KB，由一个名称（Name）、一个值（Value）和其它几个用于控制cookie有效期、安全性、使用范围的可选属性组成。
- 但是cookie在每次请求中都会被发送，如果不适用HTTPS对其加密，它保存的信息就容易泄漏，导致安全风险。如，在一些使用cookie保持登录的网站上，如果cookie被窃取，他人很容易利用你的cookie在假扮你登录。
- Cookie的常用属性：
| 属性 | 作用 | 例子 |
|---|---|---|
| Expires | 设置Cookie的过期时间 | Expires=Wed, 21 Oct 2015 07:28:00 GMT |
| Max-Age | 设置在 Cookie 失效之前需要经过的秒数（优先级比Expires高） | Max-Age=604800 |
| Domain | 指定了 Cookie 可以送达的主机名 | |
| Path | 指定了一个 URL路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部 | Path=/docs # /docs/Web/ 下的资源会带 Cookie 首部 |
| Secure | 只应通过被HTTPS协议加密过的请求发送给服务端 |
- cookie的使用
document.cookie = '名字=值';
- cookie的修改：首先要确定domain和path属性都是相同的，否则就会创建出一个新的cookie。
Set-Cookie:name=aa; domain=aa.net; path=/ # 服务端设置
document.cookie =name=bb; domain=aa.net; path=/ # 客户端设置
- cookie的删除：最常用的方法就是给cookie设置一个过期的事件，cookie过期后就会被浏览器删除。
2、localStorage
特点：
- 生命周期：持久化的本地存储，除非主动删除数据，否则数据永远不会过期；
- 存储的信息在同一域中是共享的；
- 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件，但是别的页面会触发storage事件。
- 大小：5M（跟浏览器厂商有关系）
- localStorage本质上是对字符串的读取，如果存储内容多的话，会消耗内存空间，会导致页面变卡
- 受同源策略的限制
使用：
| 功能 | 代码 |
|---|---|
| 设置 | localStorage.setItem(‘username’,‘cfangxu’); |
| 获取 | localStorage.getItem(‘username’) |
| 获取键名 | localStorage.key(0) //获取第一个键名 |
| 删除 | localStorage.removeItem(‘username’) |
| 一次性清除所有存储 | localStorage.clear() |
缺点：
- 无法像Cookie一样设置过期的时间；
- 只能存入字符串，无法直接存对象。
3、sessionStorage
sessionStorage和localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage将会删除数据。
4、扩展的前端存储方式
- indexedDB是一种低级的API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。
- 虽然Web Storage对于存储较少量的数据很有用，但对于存储大量的结构化数据来说，这种方法不太方便，这是用IndexDB就很有用。
优点：
- 存储量理论上没有上限；
- 所有操作都是异步的，相比LocalStorage同步操作性能更高，尤其是数据量较大时
- 原生支持存储JS的对象；
- 就是一个数据库，数据库能做的它都能做。
缺点：
- 操作非常繁琐；
- 本身有一定的门槛。
二、三种存储方式的区别
| 区别 | cookie | sessionStorage | localStorage |
|---|---|---|---|
| 存储大小 | 不能超过4K | 可以5M或者更大 | 可以5M或者更大 |
| 有效时间 | 过期时间之前一直有效 | 当前浏览器窗口关闭自动删除 | 不主动删除就永久有效 |
| 数据与服务器之间的交互方式 | 自动相互传递 | 本地保存 | 本地保存 |
三、应用场景
| 场景 | 推荐 |
|---|---|
| 标记用户与跟踪用户行为的情况 | cookie |
| 适合长期保存在本地的数据（令牌） | localStorage |
| 敏感账号一次性登录 | sessionStorage |
| 存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况 | indexedDB |
版权声明：本文为weixin_44337386原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。