代码视界

Hanpeng Chen的个人博客

聊一聊浏览器本地存储

本文于 456 天之前发表,文中内容可能已经过时。

前言

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

浏览器的本地存储主要分为:CookieWebStorageIndexedDB。其中WebStorage又可以分为localStoragesessionStorage

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方法如下:

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

Cookie的缺点

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

Web Storage

Web Storage分为localStorage和sessionStorage。

localStorage

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

localStorage有以下几个特点:

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

使用方法:

1
2
3
4
5
6
7
8
9
10
// 设置
localStorage.setItem('name', '张三')
localStorage.age = '25'
// 取值
localStorage.getItem('name')
let age = localStorage.age
// 移除
localStorage.removeItem('name')
// 移除所有
localStorage.clear()

sessionStorage

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

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

sessionStorage的特点:

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

使用方法:

1
2
3
4
5
6
7
8
9
10
// 设置
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 用于客户端存储大量结构化数据
欢迎关注微信公众号: 『前端极客技术』『代码视界』
支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励