浏览器中H5存储方式的横向对比

✍️ 作者简介: 一个每天中午去打篮球和锻炼的前端开发。

🐈‍⬛ 两只猫🐱和一只狗的铲屎官🐶

🧣 微博: GuoJ阝阝（fu）

---

前言

我们经常需要用到浏览器存储数据：比如cookie存储token，localStorage，sessionStorage......但是它们之间有什么区别？

浏览器存储，除了常用的localStorage、sessionStorage，还有indexedDB、Web sql等等。
既然遇到了这些问题，那么我就整理一下。

提示：以下是本篇文章正文内容

一、本地空间存储（localStorage）

1.简介

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题，我们可以用它来存储数据到浏览器中。由于数据可以长久地存储，也就意味着浏览器窗口关闭后数据也不会丢失。

2.特点

localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。

• 数据结构
  localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。
• 过期时间
  localstorage原生是不支持设置过期时间的，想要设置的话，就只能自己来封装一层逻辑来实现
• 容量限制
  目前业界基本上统一为5M
• 其他
  localStorage在所有同源窗口中都是共享的；

二、会话空间存储（sessionStorage）

1.简介

sessionStorage的生存期顾名思义，类似于session，只要关闭浏览器或者浏览器的标签页，就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

2.特点

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

• 容量限制
  sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 其他
  sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；

三、indexedDB

1.简介

indexedDB是HTML5新增的一种数据库，该数据库是一种存储在客户端本地的NoSQL数据库，用于在本地存储大量数据。目前主流浏览器的最新版本都对其提供了支持。

indexedDB是一个“对象数据库”，而不是“关系数据库”，它相对于传统的关系数据库（如MySQL、SQL Server等）来说，功能简化了很多，但是已经足够满足实际开发需求了。
除了一些数据库本身的特性，例如支持事务、存储二进制数据等，还有：

1、键值对存储。内部采取对象仓库存储数据，这个对象仓库中数据采用键值对的方式来存储。
2、异步操作。数据库的读写属于I/O操作，浏览器中对异步I/O提供了支持。
3、受同源策略限制，即无法访问跨域的数据库。
IndexedDB是运行在浏览器中的非关系型数据库，理论上这个容量是没有上限的。

四、Web SQL

1.简介

HTML5标准中的Web SQL Database实际上已经被废除，如其他地方看到，直接忽略即可。在本地数据库这个技术方向，最新的HTML5标准表示只支持indexedDB。

五、Cookie

1.简介

Cookie最开始并不是用于本地存储的，而是为了弥补HTTP在状态管理上的不足：

• HTTP是一个无状态的协议，客户端向服务器发送请求，服务器返回响应，但是下一次发送请求时服务端就无法识别客户端的身份信息，故而产生了Cookie。
• Cookie本质上是浏览器里面存储的一个很小的文本文件，内部以键值对的方式存储。向同一个域名下发送请求都会携带相同的Cookie，服务器拿到Cookie进行解析，就能拿到客户端的状态。
  也就是说，Cookie的作用就是用来做状态存储的。

2.特点

• 容量缺陷。Cookie的体积上限只有4KB，只能用来存储少量的信息。
• 性能缺陷。Cookie是紧跟域名的，不管域名下面的某个地址需不需要这个Cookie，它都会携带上完整的Cookie。这样随着请求数据的增多，很容易造成性能上的浪费。
• 安全缺陷。由于Cookie以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改，并在Cookie的有效期内重新发送给服务器。
  cookie也是在所有同源窗口中都是共享的。

总结

Cookie存储需要在请求中携带的少量数据。
localStorage用于永久保存客户端的少量数据。
sessionStorage用于临时保存客户端的少量数据。
indexedDB用于永久保存客户端的大量数据。