聊一聊浏览器本地存储|七日打卡

前言

作为一名前端工程师，我们每天都在跟浏览器打交道，浏览器的本地存储更是经常用到。今天我们就一起来聊一聊浏览器的本地存储。

浏览器的本地存储主要分为：Cookie、 WebStorage、 IndexedDB。其中WebStorage又可以分为localStorage和sessionStorage。

Cookie

HTTP Cookie，通常叫做Cookie，一开始是在客户端用于存储会话信息的。

Cookie主要构成

name：名称，一个唯一确定的cookie的名称，cookie的名称必须经过URL编码。
value：值，存储在cookie中的字符串值。值必须被URL编码。
Domain：域，指明cookie对哪个域有效，所有向该域发送的请求都会包含这个信息。
path：路径，对于指定域中的那个路径，应该向服务器发送cookie。
Expires/Max-Age：有效期，表示cookie的有效期。
HttpOnly：如果这个这个值设置为true，就不能通过JS脚本获取cookie的值。通过这个值可以有效防止XSS攻击。
Secure：安全标志，指定后，cookie只有在使用SSL连接的时候才能发送到服务器。

Cookie的原理

第一次访问网站时，浏览器发出请求，服务器响应请求后，会在响应头中添加一个Set-Cookie，将cookie放入响应请求中。

在第二次发起请求时，浏览器通过Cookie请求头部将cookie信息送给服务器，服务端根据cookie信息辨别用户身份。

Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

Cookie的生成

Cookie的生成方式主要有两种：

服务端设置Cookie
客户端设置Cookie

服务端设置方式参考上面Cookie的原理，具体的实现方式自行查阅相关资料。客户端设置Cookie方法如下：

document.cookie = "name=zhangsan; age=20";

Cookie的缺点

每个特定域名下的cookie数量有限，不同浏览器数量限制不同。如果超过数量限制后再设置Cookie，浏览器就会清除以前设置的Cookie。
大小只有4kb。
每次HTTP请求都会默认带上Cookie，影响获取资源的效率。
Cookie的获取、设置、删除方法需要我们自己去封装。

Web Storage

Web Storage分为localStorage和sessionStorage。

localStorage

localStorage以键值对的方式存储，永久存储，永不失效，除非手动删除。

localStorage有以下几个特点：

保持的数据永久有效，除非手动删除；
大小为5M
仅在客户端使用，不和服务端进行通信
接口封装较好

使用方法：

// 设置
localStorage.setItem('name', '张三')
localStorage.age = '25'
// 取值
localStorage.getItem('name')
let age = localStorage.age
// 移除
localStorage.removeItem('name')
// 移除所有
localStorage.clear()

sessionStorage

sessionStorage对象存储特定于某个会话的数据，当这个会话的页签或浏览器关闭，sessionStorage也就消失了。

页面刷新之后，存储在sessionStorage中的数据仍然存在可用。

sessionStorage的特点：

会话级别的浏览器存储
大小为5M
仅在客户端使用，不和服务端通信
接口封装较好

使用方法：

// 设置
sessionStorage.setItem('name', '张三')
sessionStorage.age = '25'
// 取值
sessionStorage.getItem('name')
let age = sessionStorage.age
// 移除
sessionStorage.removeItem('name')
// 移除所有
sessionStorage.clear()

sessionStorage和localStorage的区别：localStorage的数据可以长期保留，sessionStorage的数据在关闭页面后即被清空。

IndexedDB

IndexedDB，全称Indexed Database API，是浏览器中保持结构化数据的一种数据库。

IndexedDB的思想是创建一套API，方便保存和读取JavaScript对象，同时支持查询和搜索。

IndexedDB特点

键值对存储：IndexedDB采用对象仓库存储数据，可以存储所有类型的数据。仓库中数据以键值对的形式保持。
异步：IndexedDB操作时不会锁死浏览器，用户依然可以进行其他操作。
支持事务：有学过数据库的对事务肯定不陌生。事务意味着在一系列操作中，只要有一步失败，整个事务就都取消，数据库回滚到事务执行之前，不存在只改写一部分数据的情况。
同源限制：IndexedDB受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
储存空间大: IndexedDB 的储存空间比 localStorage大得多，一般来说不少于 250MB，甚至没有上限。
支持二进制储存: IndexedDB不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

IndexedDB的入门教程，可以查看阮一峰老师的文章：浏览器数据库 IndexedDB 入门教程

总结

Cookie主要用于“维持状态”，而非本地存储数据
Web Storage是专门为浏览器提供的数据存储机制，不与服务端发生通信
IndexedDB 用于客户端存储大量结构化数据

最后

如果你觉得这篇内容对你有帮助的话：

1、点赞支持下吧，让更多的人也能看到这篇内容

2、关注公众号：前端极客技术(FrontGeek)，我们一起学习一起进步。