【前端知识之JS】JS本地存储

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍本地存储的四种方式，以及他们的比较和应用。

---

一、本地存储的方式

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