你必须知道的10个客户端存储方式

写在开头：

在浏览器中存储和操作数据（也称为客户端存储）在没有必要或不切实际将数据发送到 Web 服务器时非常有用。

在浏览器中存储和操作数据的情况包括：

• 保留客户端应用程序的状态——例如当前屏幕、输入的数据、用户首选项等。

• 访问本地数据或文件并具有严格隐私要求的实用程序

• 离线工作的渐进式网络应用程序 (PWA)

以下是用于存储浏览器数据的十个选项：

• JavaScript 变量

• DOM节点存储

• 网络存储（localStorage和sessionStorage）

• 索引数据库

• 缓存 API（不要使用 AppCache！）

• 文件系统访问 API

• 文件和目录条目 API

• cookies

• window.name

• 网络SQL

本文研究了在浏览器中存储数据的这十种不同方式，涵盖了它们的限制、优点、缺点以及每种技术的最佳用途。

在我们浏览选项之前，先简要介绍一下数据持久性……

数据持久化

通常，您存储的数据将是：

1. 持久性：它一直存在，直到您的代码选择删除它

2. volatile：它一直保持到浏览器会话结束，通常是在用户关闭选项卡时

在现实中更加微妙。

用户、操作系统、浏览器或插件可以随时阻止或删除持久数据。当浏览器接近分配给该存储类型的容量时，它可以决定删除旧的或更大的项目。

浏览器还记录页面状态。您可以离开站点并单击返回或关闭并重新打开选项卡；该页面应该看起来相同。被视为仅会话的变量和数据仍然可用。

1. JavaScript 变量

公制	评论
容量	没有严格限制，但当您填充内存时，浏览器可能会变慢或崩溃
读/写速度	最快的选择
坚持	差：数据被浏览器刷新擦除

在 JavaScript 变量中存储状态是最快和最简单的选择。我相信你不需要一个例子，但是……

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

好处：

• 易于使用

• 快速地

• 无需序列化或反序列化

缺点：

• 易碎：刷新或关闭标签会擦拭一切

• 第三方脚本可以检查或覆盖全局 (window) 值

您已经在使用变量。您可以考虑在页面卸载时永久存储变量状态。

2. DOM 节点存储

公制	评论
容量	没有严格限制但不适合大量数据
读/写速度	快速地
坚持	差：数据可以被其他脚本或刷新擦除

大多数 DOM 元素，无论是在页面上还是在内存中，都可以将值存储在命名属性中。使用前缀为 的属性名称更安全data-：

1. 该属性永远不会有关联的 HTML 功能

2. 您可以通过访问值dataset属性，而不是通过更长的.setAttribute()和.getAttribute()方法。

值存储为字符串，因此可能需要序列化和反序列化。例如：

// locate <main> element
const main = document.querySelector('main');

// store values
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// retreive values
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1

好处：

• 您可以在 JavaScript 或 HTML 中定义值 — 例如 <main data-value1="1">

• 用于存储特定组件的状态

• 用DOM 很快！（与流行观点相反）

缺点：

• 脆弱点：刷新或关闭选项卡会擦除所有内容（除非服务器渲染到 HTML 中的值）

• 仅字符串：需要序列化和反序列化

• 较大的 DOM 会影响性能

• 第三方脚本可以检查或覆盖值

• DOM 节点存储比变量慢。在可以将组件的状态存储在 HTML 中的情况下，请谨慎使用它。

3. 网络存储

（localStorage 和 sessionStorage）

公制	评论
容量	每个域 5MB
读/写速度	同步操作：可能很慢
坚持	数据保留直到清除

Web Storage提供了两个类似的 API 来定义名称/值对。用：

1. window.localStorage 存储持久数据

2. window.sessionStorage 在浏览器选项卡保持打开状态时保留仅会话数据（但请参阅数据持久性）

使用以下命令存储或更新命名项目.setItem()：

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

用 getItem()检索它们：

const state = JSON.parse( localStorage.getItem('state') );

并用removeItem()删除它们：

localStorage.removeItem('state')

其他属性和方法包括：

• length: 存储的项目数

• key(N): 第 N 个键的名称

• clear(): 删除所有存储的项目

更改任何值都会在连接到同一域的其他浏览器选项卡/窗口中引发存储事件。您的应用程序可以相应地响应：

window.addEventListener('storage', s => {

  console.log(`item changed: ${ s.key }`);
  console.log(`from value  : ${ s.oldValue }`);
  console.log(`to new value: ${ s.newValue }`);

});

好处：

• 简单的名称/值对 API

• 会话和持久存储选项

• 良好的浏览器支持

缺点：

• 仅字符串：需要序列化和反序列化

• 没有事务、索引或搜索的非结构化数据

• 同步访问会影响大数据集的性能

Web Storage 是更简单、更小、临时值的理想选择。对于存储大量结构化信息不太实用，但您可以通过在页面卸载时写入数据来避免性能问题。

4. 索引数据库

公制	评论
容量	取决于设备。至少 1GB，但最多可以是剩余磁盘空间的 60%
读/写速度	快速地
坚持	数据保留直到清除

IndexedDB 提供了一个类似于 NoSQL 的低级 API 来存储大量数据。可以对存储进行索引、使用事务更新和使用异步方法进行搜索。

IndexedDB API 很复杂，需要一些事件处理。以下函数在传递名称、版本号和可选升级函数（版本号更改时调用）时打开数据库连接：

// connect
function dbConnect(dbName, version, upgrade) {

  return new Promise((resolve, reject) => {

    const request = indexedDB.open(dbName, version);

    request.onsuccess = e => {
      resolve(e.target.result);
    };

    request.onerror = e => {
      console.error(`indexedDB error: ${ e.target.errorCode }`);
    };

    request.onupgradeneeded = upgrade;

  });

}

以下代码连接到myDB数据库并初始化todo对象存储（类似于 SQL 表或 MongoDB 集合）。然后它定义了一个名为id的自动递增键：

(async () => {

  const db = await dbConnect('myDB', 1.0, e => {

    db = e.target.result;
    const store = db.createObjectStore('todo', { keyPath: 'id', autoIncrement: true });

  })

})();

一旦db连接就绪，你可以.add在交易中新的数据项：

db.transaction(['todo'], 'readwrite')
  .objectStore('todo')
  .add({ task: 'do something' })
  .onsuccess = () => console.log( 'added' );

您可以检索值，例如第一项：

db.transaction(['todo'], 'readonly')
  .objectStore('todo')
  .get(1)
  .onsuccess = data => console.log( data.target.result );
  // { id: 1, task: 'do something' }

好处：

• 空间最大的灵活数据存储

• 强大的交易、索引和搜索选项

• 良好的浏览器支持

缺点：

• 一个复杂的回调和基于事件的 API

• 索引资料是可靠地存储大量数据的最佳选择，但你要达到一个包装库，如美洲开发银行，Dexie.js，或JsStore。

5.缓存API

公制	评论
容量	取决于设备，但 Safari 将每个域限制为 50MB
读/写速度	快速地
坚持	数据会一直保留，直到清除或在 Safari 中使用两周后

所述缓存API提供了用于HTTP请求和响应对象对存储。您可以创建任意数量的命名缓存来存储任意数量的网络数据项。

API 通常用于 Service Worker 以缓存渐进式 Web 应用程序的网络响应。当设备与网络断开连接时，可以重新提供缓存资产，以便网络应用程序可以离线运行。

以下代码将网络响应存储在名为myCache的缓存中：

// cache name
const cacheName = 'myCache';

(async () => {

  // cache network response
  const stored = await cacheStore('/service.json') );
  console.log(stored ? 'stored OK' : 'store failed');

})();

// store request
async function cacheStore( url ) {

  try {

    // open cache
    const cache = await caches.open( cacheName );

    // fetch and store response
    await cache.add( url );
    return true;

  }
  catch(err) {
    return undefined; // store failed
  }

}

一个类似的函数可以从缓存中检索一个项目。在此示例中，它返回响应正文文本：

(async () => {

  // fetch text from cached response
  const text = await cacheGet('/service.json') );
  console.log( text );

})();

async function cacheGet( url ) {

  try {

    const

      // open cache
      cache = await caches.open( cacheName ),

      // fetch stored response
      resp = await cache.match(url);

    // return body text
    return await resp.text();

  }
  catch(err) {
    return undefined; // cache get failed
  }

}

好处：

• 存储任何网络响应

• 可以提高 Web 应用程序的性能

• 允许 Web 应用程序离线运行

• 一个现代的基于 Promise 的 API

缺点：

• 不适合存储应用程序状态

• 在渐进式网络应用程序之外可能不太有用

• Apple 对 PWA 和 Cache API 并不友好

缓存 API 是存储从网络检索到的文件和数据的最佳选择。你可以或许用它来存储应用程序的状态，但它不是专为目的，有更好的选择。

5.5 应用缓存

AppCache是Cache API的前身。这不是您正在寻找的存储解决方案。这里不用过多了解。那么，请继续往下看。

6.文件系统访问API

公制	评论
容量	取决于剩余磁盘空间
读/写速度	取决于文件系统
坚持	数据保留直到清除

该文件系统访问API允许从本地文件系统浏览器来读取、写入、修改和删除文件。浏览器在沙盒环境中运行，因此用户必须授予对特定文件或目录的权限。这将返回一个FileSystemHandle，因此 Web 应用程序可以像桌面应用程序一样读取或写入数据。

以下函数将Blob保存到本地文件：

async function save( blob ) {

  // create handle to a local file chosen by the user
  const handle = await window.showSaveFilePicker();

  // create writable stream
  const stream = await handle.createWritable();

  // write the data
  await stream.write(blob);

  // save and close the file
  await stream.close();
}

好处：

• Web 应用程序可以安全地读写本地文件系统

• 不需要在服务器上上传文件或处理数据

• 渐进式网络应用程序的一项重要功能

缺点：

• 最少的浏览器支持（仅限 Chrome）

• API 可能会改变

这种存储选项最让我兴奋，但您需要等待几年才能将其用于生产。

7. 文件和目录条目 API

公制	评论
容量	取决于剩余磁盘空间
读/写速度	未知
坚持	数据保留直到清除

该文件和目录项API提供了可用的域可以创建、写入、读取和删除目录和文件沙盒文件系统。

好处：

• 可能有一些有趣的用途

缺点：

• 非标准、实现和行为之间的不兼容性可能会改变。

MDN 明确声明：不要在生产站点上使用它。最多也需要几年的时间才能获得广泛的支持。

8. cookie

公制	评论
容量	每个域 80Kb（20 个 cookie，每个最多 4Kb）
读/写速度	快速地
坚持	好：数据会一直保留到被擦除或过期

Cookie 是特定于域的数据。它们在跟踪人员方面享有盛誉，但对于任何需要维护服务器状态的系统（例如登录）来说，它们都是必不可少的。与其他存储机制不同，cookie（通常）在每次HTTP 请求和响应时在浏览器和服务器之间传递。两种设备都可以检查、修改和删除 cookie 数据。

document.cookie在客户端 JavaScript 中设置 cookie 值。您必须定义一个名称和值由等号 (=)分隔的字符串。例如：

document.cookie = 'cookie1=123';
document.cookie = 'anothercookie=abc';

值不得包含逗号、分号或空格，因此encodeURIComponent()可能需要：

document.cookie = `hello=${ encodeURIComponent('Hello, everyone!') }`;

可以使用分号分隔符附加更多 cookie 设置，包括：

• ;domain=: 如果未设置，则 cookie 仅在当前 URL 域中可用。使用;path=mysite.com将允许它在mysite.com.

• ;path=: 如果未设置，cookie 仅在当前路径和子路径中可用。设置;path=/为允许域中的任何路径。

• ;max-age=：cookie 过期时间（以秒为单位）——例如;max-age=60.

• ;expires=: cookie 到期日期 - 例如;expires=Thu, 04 July 2021 10:34:38 UTC（用于date.toUTCString()适当格式化）。

• ;secure：cookie 将仅通过 HTTPS 传输。

• ;HTTPOnly: 使客户端 JavaScript 无法访问 cookie。

• ;samesite=: 控制另一个域是否可以访问 cookie。将其设置为lax（默认值，将 cookie 共享到当前域）、strict（在跟随来自另一个域的链接时停止发送初始 cookie）或none（无限制）。

示例：设置一个状态 cookie，该 cookie 将在 10 分钟后过期，并且可在当前域中的任何路径上使用：

const state = { a:1, b:2, c:3 };

document.cookie = `state=${ encodeURIComponent(JSON.stringify(state)) }; path=/; max=age=600`;

document.cookie返回一个字符串，其中包含以分号分隔的每个名称和值对。例如：

console.log( document.cookie );
// "cookie1=123; anothercookie=abc; hello=Hello%2C%20everyone!; state=%7B%22a%22%3A1%2C%22b%22%3A2%2C%22c%22%3A3%7D"

下面的函数解析字符串并将其转换为包含名称-值对的对象。例如：

const
  cookie = cookieParser();
  state = cookie.state;

console.log( state );
// { a:1, b:2, c:3 }


// parse cookie values
function cookieParser() {

  const nameValue = {};

  document.cookie
    .split('; ')
    .map(nv => {

      nv = nv.split('=');
      if (nv[0]) {

        let v = decodeURIComponent( nv[1] || '' );

        try { v = JSON.parse(v); }
        catch(e){}

        nameValue[ nv[0] ] = v;

      }

    })

  return nameValue;

}

好处：

• 在客户端和服务器之间保持状态的可靠方法

• 仅限于域和可选的路径

• 带有max-age（秒）或Expires（日期）的自动到期控制

• 默认情况下在当前会话中使用（设置到期日期以在页面刷新和选项卡关闭后保留数据）

缺点：

• cookie 通常被浏览器和插件阻止（它们通常被转换为会话 cookie，以便网站继续工作）

• 笨拙的 JavaScript 实现（最好创建自己的 cookie 处理程序或选择诸如js-cookie 之类的库）

• 仅字符串（需要序列化和反序列化）

• 有限的存储空间

• 除非您限制访问，否则第三方脚本可以检查 cookie

• 因侵犯隐私而受到指责（地区立法可能要求您对非必要的 cookie 显示警告）

• cookie 数据附加到每个可能影响性能的 HTTP 请求和响应中（存储 50Kb 的 cookie 数据，然后请求十个 1 字节的文件，将产生 1 兆字节的带宽）

除非没有可行的替代方案，否则避免使用 cookie。

9. window.name

公制	评论
容量	各不相同，但几兆字节应该是可能的
读/写速度	快速地
坚持	会话数据一直保留到选项卡关闭

该window.name属性设置并获取窗口浏览上下文的名称。您可以设置单个字符串值，该值在浏览器刷新或链接到别处并单击返回之间保持不变。例如：

let state = { a:1, b:2, c:3 };
window.name = JSON.stringify( state );

使用以下方法检查值：

state = JSON.parse( window.name );
console.log( state.b );
// 2

好处：

• 易于使用

• 可用于仅会话数据

缺点：

• 仅字符串：需要序列化和反序列化

• 其他域中的页面可以读取、修改或删除数据（切勿将其用于敏感信息）

• window.name从来没有为数据存储而设计。这是一个黑客，有更好的选择。

10.WebSQL

公制	评论
容量	每个域 5MB
读/写速度	迟缓
坚持	数据保留直到清除

WebSQL致力于将类似 SQL 的数据库存储引入浏览器。示例代码：

// create DB (name, version, description, size in bytes)
const db = openDatabase('todo', '1.0', 'my to-do list', 1024 * 1024);

// create table and insert first item
db.transaction( t => {

  t.executeSql('CREATE TABLE task (id unique, name)');
  t.executeSql('INSERT INTO task (id,name) VALUES (1, "wash cat")');

});

// output array of all items
db.transaction( t => {

  t.executeSql(
    "SELECT * FROM task",
    [],
    (t, results) => { console.log(results.rows); }
  );

});

Chrome 和 Safari 的某些版本支持该技术，但 Mozilla 和 Microsoft 反对它而支持Indexed DB。

好处：

• 专为强大的客户端数据存储和访问而设计

• 服务器端开发人员经常使用的熟悉的 SQL 语法

缺点：

• 有限且有问题的浏览器支持

• 跨浏览器不一致的 SQL 语法

• 异步但笨重的基于回调的 API

• 表现不佳

不要使用 WebSQL！自 2010 年规范被弃用以来，它一直不是一个可行的选择。

检查存储

该存储API可以检查可用的网络存储，索引资料和缓存API空间。除了 Safari 和 IE 之外的所有浏览器都支持基于 Promise 的 API，它提供了.estimate()一种计算quota（域可用空间）和usage（已使用空间）的方法。例如：

(async () => {

  if (!navigator.storage) return;

  const storage = await navigator.storage.estimate();

  console.log(`bytes allocated  : ${ storage.quota }`);
  console.log(`bytes in use     : ${ storage.usage }`);

  const pcUsed = Math.round((storage.usage / storage.quota) * 100);
  console.log(`storage used     : ${ pcUsed }%`);

  const mbRemain = Math.floor((storage.quota - storage.usage) / 1024 / 1024);
  console.log(`storage remaining: ${ mbRemain } MB`);

})();

有两种进一步的异步方法可用：

• .persist():true如果站点有权存储持久数据，则返回，以及

• .persisted():true如果站点已经存储了持久数据，则返回

浏览器开发工具中的应用程序面板（在 Firefox 中称为Storage）允许您查看、修改和清除 localStorage、sessionStorage、IndexedDB、WebSQL、cookie 和缓存存储。

您还可以通过单击开发人员工具的网络面板中的任何项目来检查在 HTTP 请求和响应标头中发送的 cookie 数据。

写在最后：

这些存储解决方案都不是完美的，您需要在复杂的 Web 应用程序中采用多种解决方案。这意味着学习更多的 API。但是在每种情况下都有选择是一件好事——当然，假设您可以选择合适的选项！

• 如果你感觉写得不错，帮我点个[在看、赞、关注]吧

• 让我们一起成为前端架构师！