浏览器的四大存储方式！！

前言

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

不同特点

1. LocalStorage:

   • 持久存储,在页面/浏览器关闭后数据仍然存在
   • 每个域名下存储空间为 5MB
   • 只支持字符串类型的键值对
   • 受同源策略限制,无法跨域访问

2. SessionStorage:

   • 会话存储,在页面/浏览器关闭后数据会被清除
   • 每个域名下存储空间为 5MB
   • 只支持字符串类型的键值对
   • 受同源策略限制,无法跨域访问

3. Cookies:

   • 小容量存储,单个 cookie 大小不超过 4KB
   • 会随每次 HTTP 请求发送到服务器
   • 可设置过期时间和作用域
   • 只支持字符串类型的键值对

4. IndexedDB:

   • 大容量 NoSQL 数据库,没有固定存储上限
   • 支持复杂的数据结构,如数组和对象
   • 需要通过复杂的 API 进行操作
   • 受同源策略限制,无法跨域访问

共同点

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

1. 存储位置:

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

2. 键值对结构:

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

3. 数据隔离:

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

4. 异步操作:

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

5. 容量限制:

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

6. 数据持久性:

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

区别

主要区别如下:

1. 数据生命周期:

   • LocalStorage 和 IndexedDB 数据是持久存储的,除非主动清除。
   • SessionStorage 数据在会话结束(如页面关闭)时会被清除。
   • Cookies 可以设置过期时间,过期后会被浏览器删除。

2. 数据大小限制:

   • LocalStorage 和 SessionStorage 每个域名下的存储容量通常为 5MB。
   • Cookies 容量较小,通常不超过 4KB。
   • IndexedDB 没有固定的存储上限。

3. 传输机制:

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

4. 数据结构:

   • LocalStorage、SessionStorage 和 Cookies 只支持字符串类型的键值对。
   • IndexedDB 支持更复杂的数据结构,如数组和对象。

5. 操作复杂度:

   • LocalStorage、SessionStorage 和 Cookies 使用简单,可通过 JavaScript 直接操作。
   • IndexedDB 需要通过复杂的 API 进行各种数据库操作,使用起来较为复杂。

6. 跨域限制:

   • LocalStorage 和 SessionStorage 受同源策略限制,无法跨域访问。
   • Cookies 可以设置作用域,限制其在特定路径或域名下可用。
   • IndexedDB 也受同源策略限制