在浏览器中存储和操作数据（也称为客户端存储）在没有必要或不实际将数据发送到 Web 服务器时很有用。
在浏览器中存储和操作数据的情况包括：
- 保留客户端应用程序的状态——例如当前屏幕、输入的数据、用户偏好等。
- 访问本地数据或文件并具有严格隐私要求的实用程序
- 离线工作的渐进式 Web 应用程序 (PWA)
以下是存储浏览器数据的十个选项：
- JavaScript 变量
- DOM节点存储
- 网络存储（
localStorage和sessionStorage） - 索引数据库
- 缓存 API（不要使用AppCache！）
- 文件系统访问 API
- 文件和目录条目 API
- 饼干
window.name- WebSQL
本文研究了这十种在浏览器中存储数据的不同方式，涵盖了它们的限制、优缺点以及每种技术的最佳用途。
在我们浏览选项之前，快速说明一下数据持久性……
数据持久性
通常，您存储的数据将是：
- 持久性：它一直存在，直到您的代码选择删除它，或者
- volatile：它一直保持到浏览器会话结束，通常是当用户关闭选项卡时
现实更加微妙。
用户、操作系统、浏览器或插件可以随时阻止或删除持久数据。当浏览器接近分配给该存储类型的容量时，浏览器可以决定删除较旧或较大的项目。
浏览器还记录页面状态。您可以离开站点并单击返回或关闭并重新打开选项卡；该页面应该看起来相同。被视为仅限会话的变量和数据仍然可用。
1. JavaScript 变量
| 公制 | 评论 |
|---|---|
| 容量 | 没有严格的限制，但是当你填满内存时，浏览器可能会变慢或崩溃 |
| 读/写速度 | 最快的选择 |
| 坚持 | 差：浏览器刷新会擦除数据 |
在 JavaScript 变量中存储状态是最快和最简单的选择。我相信你不需要一个例子，但是......
const
a = 1,
b = 'two',
state = {
msg: 'Hello',
name: 'Craig'
};
好处：
- 使用方便
- 快速地
- 无需序列化或反序列化
缺点：
- 脆弱：刷新或关闭标签会擦除所有内容
- 第三方脚本可以检查或覆盖全局 (
window) 值
您已经在使用变量。您可以考虑在页面卸载时永久存储变量状态。
2. DOM节点存储
| 公制 | 评论 |
|---|---|
| 容量 | 没有严格的限制，但不适合大量数据 |
| 读/写速度 | 快速地 |
| 坚持 | 差：数据可以被其他脚本擦除或刷新 |
大多数 DOM 元素，无论是在页面上还是在内存中，都可以将值存储在命名属性中。使用前缀为 的属性名称更安全data-：
- 该属性永远不会有关联的 HTML 功能
- 您可以通过
dataset属性而不是更长的.setAttribute()和.getAttribute()方法来访问值。
值存储为字符串，因此可能需要进行序列化和反序列化。例如：
// locate 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 中定义值——例如
- 用于存储特定组件的状态
- 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 明确指出：不要在生产站点上使用它
。广泛的支持最多需要几年时间。
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。但是在每种情况下都有选择是一件好事——当然，假设您可以选择合适的选项！