今天来聊聊浏览器的四大存储方式，LocalStorage、SessionStorage、Cookies以及IndexedDB

不同特点

LocalStorage:

持久存储,在页面/浏览器关闭后数据仍然存在

每个域名下存储空间为 5MB

只支持字符串类型的键值对

受同源策略限制,无法跨域访问

SessionStorage:

会话存储,在页面/浏览器关闭后数据会被清除

每个域名下存储空间为 5MB

只支持字符串类型的键值对

受同源策略限制,无法跨域访问

Cookies:

小容量存储,单个 cookie 大小不超过 4KB

会随每次 HTTP 请求发送到服务器

可设置过期时间和作用域

只支持字符串类型的键值对

IndexedDB:

大容量 NoSQL 数据库,没有固定存储上限

支持复杂的数据结构,如数组和对象

需要通过复杂的 API 进行操作

受同源策略限制,无法跨域访问

共同点

这四种存储方式都是基于 Web 技术实现的客户端数据存储方案

存储位置:

它们都是在客户端(浏览器)中进行数据存储,而非服务器端。

键值对结构:

除了 IndexedDB,其他三种方式(LocalStorage、SessionStorage、Cookies)都采用键值对的形式来存储数据。

数据隔离:

数据存储在不同的域名或路径下是相互隔离的,互不干扰。

异步操作:

除了 Cookies 会随请求发送到服务器,其他三种方式都是在客户端异步操作的。

容量限制:

除了 IndexedDB 没有固定上限,其他三种方式都有一定的存储容量限制。

数据持久性:

LocalStorage 和 IndexedDB 的数据是持久存储的,除非主动删除;而 SessionStorage 和 Cookies 则有生命周期限制。

区别

主要区别如下:

数据生命周期:

LocalStorage 和 IndexedDB 数据是持久存储的,除非主动清除。

SessionStorage 数据在会话结束(如页面关闭)时会被清除。

Cookies 可以设置过期时间,过期后会被浏览器删除。

数据大小限制:

LocalStorage 和 SessionStorage 每个域名下的存储容量通常为 5MB。

Cookies 容量较小,通常不超过 4KB。

IndexedDB 没有固定的存储上限。

传输机制:

Cookies 会随每次 HTTP 请求发送到服务器,其他三种方式不会。

数据结构:

LocalStorage、SessionStorage 和 Cookies 只支持字符串类型的键值对。

IndexedDB 支持更复杂的数据结构,如数组和对象。

操作复杂度:

LocalStorage、SessionStorage 和 Cookies 使用简单,可通过 JavaScript 直接操作。

IndexedDB 需要通过复杂的 API 进行各种数据库操作,使用起来较为复杂。

跨域限制:

LocalStorage 和 SessionStorage 受同源策略限制,无法跨域访问。

Cookies 可以设置作用域,限制其在特定路径或域名下可用。

IndexedDB 也受同源策略限制