现代化浏览器的本地存储选项,及其最新状况

Vue.js

现代浏览器为 web 应用提供了几种存储选项。每种存储选项都是唯一且都有其特性和应用场景。

然而,为你的用例选择合理的存储方式的前提是,你得对它们的特性和限制有着深刻的理解。

在本文中,我将深入五大浏览器存储方式及其状态,同时帮助您找到最适合用例的存储方式。

存储方式和特性的介绍

如果您快速浏览过 Chrome 开发者工具,那么您应该能找到下面列出的浏览器存储类型。

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookies

让我们继续找出每个存储方式和其独特性质的详细信息吧!

1. Local Storage

由于其简单易用的特性,本地存储使用最为广泛。它允许以序列化字符串的形式存储键值对。您可以在本地存储中执行如下操作,

  • setItem() — 保存键值
  • getItem() — 获取建值
  • removeItem() — 移除键值
  • clear() — 清空所有键值
  • key() — 检索第 n 个键值

要想在本地存储中保存数组,对象等复合类型时,需要使用 JSON.stringify 将其转为字符串。取回时,使用 JSON.parse 将其重构回 JSON。

// 在本地存储中将键值对设置为字符串
localStorage.setItem('session', JSON.stringify({'id': 5, 'timeout' : 500000}));
//获取值并转化为对象
var sessionItem = JSON.parse(localStorage.getItem('session'));

Vue.js

主要亮点

  • 本地存储将在同源的所有标签页及窗口间共享
  • 数据不过期
  • 支持存储事件

存储事件是本地存储和会话存储支持的一个功能,并仅在其他监听了事件的标签页(触发事件的标签页除外)、嵌入网页 iframe 中触发。

接下来仔细看下存储事件。

//通过 addEventListener 定义存储事件
window.addEventListener('storage', () => {
  console.log(window.localStorage.getItem('id'));
});
  • 该存储在主流浏览器中限制为 5MB(规划在此限制下比较安全)

2. Session Storage

会话存储类似于本地存储,唯一的区别是会话存储的数据只能保持到浏览器标签页关闭。

因此,会话存储的作用域是同源应用以及浏览器标签页运行时。

我很好奇会话存储中的存储事件是如何工作的。即使使用了存储事件,浏览器选项卡的独立性依旧存在。

因此,使用会话存储只能在同一个标签页下同源的 Iframe 中使用。

此外,无论是本地存储还是会话存储,对其访问都是同步的,并且你的 JavaScript 代码将在访问这些存储收到数据前等待。

原文广告:使用 Bit (Github)在项目之间共享可重用组件。

Bit使在项目之间共享,记录和重用独立组件变得简单。 使用它可以最大程度地重复使用代码,保持一致的设计,团队协作,加快交付速度并构建可扩展的应用程序。

Bit 支持 Node, TypeScript, React, Vue, Angular 等。

Vue.js

3. IndexedDB

与我们讨论的存储相比,索引数据库更接近典型的 NoSQL 数据库。如果遇到难以处理的复杂的 JavaScript 对象,则可以考虑使用索引数据库。

索引数据库还支持事务,并在 Web Workers 下支持良好。

比如,Twitter 使用三个索引数据库表来保存数据。可以在数组中找到最近搜索数据以提高可用性。

Vue.js

主要亮点

  • 可以将任意类型的 JavaScript 类型的对象,比如普通对象(Blob,文件)或者数组等,存储为键值对的形式。
  • 索引数据库的 API 是异步的,因此在处理请求完成之前,它将返回一个回调
  • 可以存储结构化的数据,比如日历数据

4. Web SQL (已废弃)

最近,W3C宣布已弃用WebSQL规范。 作为替代方案,W3C建议使用更有效的indexedDB。

Web SQL是遵循SQLite规范的存储。 Google Chrome,Opera和Android浏览器支持此API (: Firefox不支持Web SQL).

Web SQL中有三种方法,分别是:

  • openDatabase()—可以使用已有的数据库来创建数据库或者新建数据库。
  • transaction() — 支持事务(提交或回滚)。
  • executeSql() —可以执行SQL查询。
var db = openDatabase(‘testDB’, ‘1.0’, ‘Test DB’, 3* 1024 * 1024); 

db.transaction(function (tr) { 
 tr.executeSql(‘CREATE TABLE IF NOT EXISTS TestTable (id unique, data)’); 
 tr.executeSql(‘INSERT INTO TestTable (id, data) VALUES (1, “itemOne”)’); 
 tr.executeSql(‘INSERT INTO TestTable (id, data) VALUES (2, “itemTwo”)’); 
});

Vue.js

主要亮点

  • 与其他存储方式不同,你可以在其中使用 SQL 查询进行数据交互。
  • 对于熟悉 SQLite 的人而言,学习曲线几乎为0。

5. Cookies

Cookies 是唯一一个与服务端共享的存储方式。Cookies 有如下两种类型,

  • 服务端 Cookie(HTTP Only 的Cookie) - 一个由服务器设置的,在浏览器端存储的变量。通常用于存储应用状态。不能被 JavaScript 访问。
  • 客户端 Cookie - 与服务端 Cookie 很像,不过可以通过 JavaScript 访问。

让我们了解下如何通过客户端管理 Cookie。

// 初始化 Cookie
document.cookie = “username=Charuka Herath; expires=Thu, 31 Dec 2020 12:00:00 UTC; path=/”;
// 读取 Cookie
var cookie= document.cookie;
// 移除 Cookie (将到期日期设置为过去的日期)
document.cookie = "username=; expires=Thu, 31 Dec 2019 12:00:00 UTC; path=/";

不过,请务必注意,对每个请求来说,Cookies 都会从浏览器发送回服务器。因此请尽可能减少其大小以节省开销。

主要亮点

  • 高效的恢复会话,页面详情,页面线程等。
  • Cookies 是持久化的。因此,数据能被浏览器一直保存直到清除。
  • 可根据用户的特殊偏好,管理和提供个性化的内容。
  • 支持通配符跨域

总结

Vue.js

在安全性上,这些存储选项都不是为存储敏感数据而设计的。不过时下流行的 JavaScript 类库提供的基于本地存储的身份认证令牌(OpenID 令牌)保存趋势正在增加,我们对该方案的解释是开放多元的。而 Cookie 在保留会话标记上有个例外,比如专为某种存储方式设计的会话场景。

此外,请一定注意,Safari 中的私密浏览(隐身)并不允许访问本地存储或者会话存储。因此如果您要继续使用这些存储方式,则必须处理可能发生的错误并向用户显示相关的消息。

当选择存储方式时,如果只有存储简单键值对的需求,本地存储就是最佳的选择。如果你打算对浏览器选项卡进行更好的安全性范围限制时,可继续使用会话存储。在选择两种方式前,请牢记其存储限制。

对于那些高级的存储需求,你可以考虑使用 IndexedDB,它更适合为做数据库的解决方案。此外,对后台运行的 Web workers 来说,这也是管理事务的首选方案。

希望这篇文章能帮助你更好的了解浏览器存储。感谢阅读!

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://blog.bitsrc.io/browser-storage-o...

译文地址:https://learnku.com/vuejs/t/53216

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!