浏览器持久化方案

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

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

保留客户端应用程序的状态——例如当前屏幕、输入的数据、用户偏好等。
访问本地数据或文件并具有严格隐私要求的实用程序
离线工作的渐进式 Web 应用程序 (PWA)

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

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

在我们浏览选项之前，快速说明一下数据持久性……

数据持久性

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

持久性：它一直存在，直到您的代码选择删除它，或者
volatile：它一直保持到浏览器会话结束，通常是当用户关闭选项卡时

现实更加微妙。

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

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

1. JavaScript 变量

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

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

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

好处：

使用方便
快速地
无需序列化或反序列化

缺点：

脆弱：刷新或关闭标签会擦除所有内容
第三方脚本可以检查或覆盖全局 ( window) 值

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

2. DOM节点存储

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

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

该属性永远不会有关联的 HTML 功能
您可以通过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. Web 存储（`localStorage`和`sessionStorage`）

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

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

window.localStorage 存储持久数据，以及
window.sessionStorage在浏览器选项卡保持打开状态时保留仅会话数据（但请参阅Data Persistence）

存储或更新命名项目.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 存储是更简单、更小、即席值的理想选择。存储大量结构化信息不太实用，但您可以通过在页面卸载时写入数据来避免性能问题。

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

IndexedDB 是可靠存储大量数据的最佳选择，但您需要使用idb、Dexie.js或JsStore等包装库。

5.缓存API

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

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

该 API 通常用于服务工作者中，以缓存渐进式 Web 应用程序的网络响应。当设备与网络断开连接时，可以重新提供缓存的资产，以便 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 和缓存 API 并不友好

Cache 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 明确指出：<q style="border-width: 0px; border-style: solid; border-color: rgba(224,223,225,var(--tw-border-opacity)); border-image: initial; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-border-opacity:1; --tw-ring-offset-shadow:0 0 transparent; --tw-ring-shadow:0 0 transparent; --tw-shadow:0 0 transparent; --tw-blur:var(--tw-empty, ); --tw-brightness:var(--tw-empty, ); --tw-contrast:var(--tw-empty, ); --tw-grayscale:var(--tw-empty, ); --tw-hue-rotate:var(--tw-empty, ); --tw-invert:var(--tw-empty, ); --tw-saturate:var(--tw-empty, ); --tw-sepia:var(--tw-empty, ); --tw-drop-shadow:var(--tw-empty, ); --tw-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); box-sizing: border-box;">不要在生产站点上使用它</q>。广泛的支持最多需要几年时间。

8. 饼干

公制	评论
容量	每个域 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，它在 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 数据，然后请求 10 个 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 的反对，支持IndexedDB。

好处：

专为强大的客户端数据存储和访问而设计
服务器端开发人员经常使用的熟悉的 SQL 语法

缺点：

有限且有缺陷的浏览器支持
跨浏览器的 SQL 语法不一致
异步但笨重的基于回调的 API
表现不佳

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

仔细检查存储

Storage API可以检查 Web Storage、IndexedDB 和 Cache API 可用的空间。除 Safari 和 IE 之外的所有浏览器都支持基于 Promise 的 API，该 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。但是在每种情况下都有选择是一件好事——当然，假设您可以选择合适的选项！

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,117评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,328评论 1赞 293
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,839评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,007评论 0赞 206
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,384评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,629评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,880评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,593评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,313评论 1赞 243
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,575评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,066评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,392评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,052评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,082评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,844评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,662评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,575评论 2赞 270