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

311次阅读  |  发布于3年以前

写在开头：

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

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

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

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

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

数据持久化

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

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

在现实中更加微妙。

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

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

1 . JavaScript 变量

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

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

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

好处：

缺点：

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

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

好处：

缺点：

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')

其他属性和方法包括：

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

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

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

});

好处：

缺点：

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' }

好处：

缺点：

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
  }

}

好处：

缺点：

缓存 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();
}

好处：

缺点：

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

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 设置，包括：

示例：设置一个状态 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;

}

好处：

缺点：

除非没有可行的替代方案，否则避免使用 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

好处：

缺点：

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。

好处：

缺点：

不要使用 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`);

})();

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

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

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

写在最后：

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

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8