跳到主要内容

web api

浏览器的存储有哪些​

答案
存储方式主要特性生命周期容量限制典型用途是否与服务端通信备注/支持API
Cookie小型文本，支持过期可设定/会话/持久约4KB会话、登录、偏好是（随请求发送）document.cookie
sessionStorage本地存储，临时会话窗口关闭即清除约5MB单页会话数据否window.sessionStorage
localStorage本地存储，持久需手动清除约5MB持久化本地数据否window.localStorage
IndexedDB结构化数据存储持久较大大量数据、离线应用否window.indexedDB
Cache Storage缓存静态资源持久较大离线缓存、PWA否caches API
Web SQL Database关系型数据库持久较大结构化数据（已废弃）否window.openDatabase

补充说明

  • Service Worker 可通过 Cache API 存储静态资源，通过 IndexedDB 存储结构化数据，内容存储于浏览器专用空间，独立于主线程。
  • Web SQL 已废弃，推荐优先使用 IndexedDB。
  • Cache Storage 主要用于离线缓存和 PWA 场景。

延伸阅读

答案
属性CookieSessionsessionStoragelocalStorage
存储位置客户端（浏览器）服务器端客户端（浏览器）客户端（浏览器）
生命周期可设定/会话/持久会话（超时销毁）窗口/标签页关闭即清除持久，需手动清除
容量限制约4KB较大约5MB约5MB
安全性较低（易被篡改）较高（服务端存储）较高较高
典型用途持久性数据、会话登录、购物车等单页会话数据持久化本地数据
随请求发送是否否否
备注支持跨窗口共享需Session ID标识仅当前窗口可见同源窗口共享

补充说明

  • Cookie 适合小数据、需与服务端通信场景，安全性较低，易被劫持或篡改。
  • Session 适合存储敏感、短期数据，安全性高但增加服务器压力。
  • sessionStorage 仅当前窗口/标签页可见，适合临时数据。
  • localStorage 持久化存储，适合长期本地数据，不随请求发送。
提示

敏感信息建议仅存于 Session，避免明文存储在 Cookie 或本地存储。

延伸阅读

localStorage 是同步还是异步​

答案

localStorage的操作是同步的。当你使用localStorage.setItem()来存储数据或者localStorage.getItem()来获取数据时，这些操作会立即执行并且不会返回一个 Promise 或者使用回调函数来处理异步操作。

localStorage.setItem('key', 'value')
console.log(localStorage.getItem('key'))

在上面的代码中，设置和获取localStorage中的数据的操作会按顺序立即执行，不会像异步操作那样需要等待一段时间后再执行后续代码。

IndexedDB 存储空间大小是如何约束的？​

关键词：IndexedDB 存储空间大小设置

IndexedDB 有大小限制。具体来说，IndexedDB 的大小限制通常由浏览器实现决定，因此不同浏览器可能会有不同的限制。

一般来说，IndexedDB 的大小限制可以分为两个方面：

  • 单个数据库的大小限制：每个 IndexedDB 数据库的大小通常会有限制，这个限制可以是固定的（如某些浏览器限制为特定的大小，如 50MB），也可以是动态的（如某些浏览器根据设备剩余存储空间来动态调整大小）。

  • 整个浏览器的大小限制：除了每个数据库的大小限制外，浏览器还可能设置整个 IndexedDB 存储的总大小限制。这个限制可以根据浏览器的策略和设备的可用存储空间来决定。

需要注意的是，由于 IndexedDB 是在用户设备上进行存储的，并且浏览器对存储空间的管理可能会受到用户权限和设备限制的影响，因此在使用 IndexedDB 存储大量数据时，需要注意数据的大小和存储限制，以免超过浏览器的限制导致出错或无法正常存储数据。

追问：开发者是否可以通过JS代码可以调整 IndexedDB 存储空间大小？

实际上，在创建数据库时，无法直接通过 API 设置存储空间大小。

IndexedDB 的存储空间大小通常由浏览器的策略决定，并且在大多数情况下，开发者无法直接控制。浏览器会根据自身的限制和规则，动态分配和管理 IndexedDB 的存储空间。因此，将存储空间大小设置为期望的值不是开发者可以直接控制的。

开发者可以通过以下方式来控制 IndexedDB 的存储空间使用情况：

  1. 优化数据模型：设计合适的数据结构和索引，避免存储冗余数据和不必要的索引。

  2. 删除不再需要的数据：定期清理不再需要的数据，以减少数据库的大小。

  3. 压缩数据：对存储的数据进行压缩，可以减少存储空间的使用。

这些方法只能间接地影响 IndexedDB 的存储空间使用情况，具体的存储空间大小仍然由浏览器决定。

48%