浏览器持久化方案

作者: 超哥__ | 来源:发表于2022-01-15 11:56 被阅读0次

在浏览器中存储和操作数据（也称为客户端存储）在没有必要或不实际将数据发送到 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。但是在每种情况下都有选择是一件好事——当然，假设您可以选择合适的选项！

浏览器持久化方案

数据持久性

1. JavaScript 变量

2. DOM节点存储

3. Web 存储（`localStorage`和`sessionStorage`）

4.索引数据库

5.缓存API

5.5 应用缓存

6.文件系统访问API

7. 文件和目录条目 API

8. 饼干

9. `window.name`

10.WebSQL

仔细检查存储

存储大杂烩

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

浏览器持久化方案

数据持久性

1. JavaScript 变量

2. DOM节点存储

3. Web 存储（localStorage和sessionStorage）

4.索引数据库

5.缓存API

5.5 应用缓存

6.文件系统访问API

7. 文件和目录条目 API

8. 饼干

9. window.name

10.WebSQL

仔细检查存储

存储大杂烩

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

3. Web 存储（`localStorage`和`sessionStorage`）

9. `window.name`