2021年了,你该选择哪个浏览器存储选项?

存储
现代网络浏览器为网络应用提供多种存储选项。每个存储选项都不一样,有各自的属性和应用。然而,若要根据自身需求选择合适的存储选项,需要对它们的属性和限制有充分的理解。本文将探究5个浏览器储存选项以及它们的状况,帮助你找到最适合你需求的那个。

本文转载自公众号“读芯术”(ID:AI_Discovery)

[[378002]]

现代网络浏览器为网络应用提供多种存储选项。每个存储选项都不一样,有各自的属性和应用。然而,若要根据自身需求选择合适的存储选项,需要对它们的属性和限制有充分的理解。本文将探究5个浏览器储存选项以及它们的状况,帮助你找到最适合你需求的那个。

快速浏览一下Chrome开发者工具,会发现以下几种浏览器存储类型:

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

让我们来详细了解一下每个存储选项及其特定属性。

1.Local Storage

Local Storage是比较广泛使用的一种存储方式,因为简单。这种存储方式允许存储序列化为字符串的键值对。你可以在Local Storage上执行以下操作:

  • setItem() — save key-value
  • getItem() — get key-value
  • removeItem() — remove key-value
  • clear() — clear all key-values
  • key() — retrieve number nth key-value

要将Local Storage中的值设置为数组、对象等,需要使用JSON.stringify将值转换为字符串。检索时,JSON.parse将该项重新构造回JSON。

  1. //set key-value pair at local storage as a string 
  2. localStorage.setItem('session', JSON.stringify({'id': 5, 'timeout' :500000}));//get value as an object 
  3. var sessionItem = JSON.parse(localStorage.getItem('session')); 

主要亮点:

  • Local Storage在同一来源的所有选项卡和窗口之间共享。
  • 数据不会过期。
  • 支持存储事件。

存储事件是由Local Storage和Session Storage支持的一项功能,它只触发其他选项卡(不包括触发它的选项卡)和iFrames中的事件侦听器。让我们仔细看看存储事件:

 

  1. //Firing storage event by addEventListener 
  2. window.addEventListener('storage', () => { 
  3.  console.log(window.localStorage.getItem('id')); 
  4. }); 

 

2.SessionStorage

Session Storage与Local Storage类似,唯一的区别是session storage里的数据可以持续到关闭浏览器选项卡。因此,Session Storage已经扩展到应用程序源和浏览器选项卡。

我很好奇存储事件是如何与Session Storage协作的。即使有存储事件,浏览器选项卡隔离仍然存在。对于Session Storage,存储事件只能通过同一选项卡中的iFrames进行访问。

此外,无论是Local Storage还是Session Storage,访问都是同步的,你的JavaScript代码将在访问这些存储时一直等到接收到数据。

3.IndexedDB

与上述存储选项相比,IndexedDB与典型的NoSQL数据库更相近。在处理复杂的、难以序列化的JavaScript对象时,可以考虑IndexedDB。IndexedDB还支持事务,同时与Web Workers协作良好。

举个例子,Twitter使用带有三个表的IndexedDB保存数据。你可以在数组中查找最近的搜索,以提高可用性。

 

2021年了,你该选择哪个浏览器存储选项?

 

主要亮点:

  • 可以存储任何JavaScript类型的数据作为键值对,如对象(blob,file)或数组等。
  • IndexedDB API是异步的,因此在请求完成时,它会返回一个回调。
  • 可以存储结构化数据,如日历数据。

4.Web SQL(不推荐)

最近,W3C宣布不推荐使用WebSQL规范,更好的选择是高效的indexedDB。Web SQL是遵循SQLite规范的存储。谷歌浏览器、Opera和安卓浏览器都支持这个API(注意:火狐浏览器不支持Web SQL)。

Web SQL中有三种方法,

  • openDatabase()——使用现有数据库创建数据库或创建新数据库。
  • transaction ()—控制事务(提交或回滚)。
  • executeSql()—可以执行真实的Sql查询。

 

  1. var db =openDatabase(‘testDB’, ‘1.0’, ‘Test DB’, 3* 1024 * 1024);  
  2. db.transaction(function (tr) {  
  3.  tr.executeSql(‘CREATE TABLE IF NOTEXISTS TestTable (id unique, data)’);  
  4.  tr.executeSql(‘INSERT INTO TestTable(id, data) VALUES (1, “itemOne”)’);  
  5.  tr.executeSql(‘INSERT INTO TestTable(id, data) VALUES (2, “itemTwo”)’);  
  6. }); 

 

 

2021年了,你该选择哪个浏览器存储选项?

 

主要亮点:

  • 与其他存储选项不同,你可以使用SQL查询与数据库进行交互。
  • 对于任何熟悉SQLite的人来说,学习空间很小甚至是没有。

5.Cookies

Cookies是唯一一个也与服务器共享的浏览器存储选项。两类Cookies分别是:

  • 服务器端Cookie(仅仅适用于HTTP的Cookie)——由服务器设置的变量,存储在浏览器中。用于存储应用程序状态。无法通过JavaScript访问。
  • 客户端Cookie——与服务器端Cookie类似,但是可以通过JavaScript访问。

 

  1. //Initialize a cookie 
  2. document.cookie = “username=Charuka Herath; expires=Thu, 31 Dec 2020 12:00:00UTC; path=/”;//Read a cookie 
  3. var cookie= document.cookie;//Remove cookie (Set expiration date to a pastdate) 
  4. document.cookie = "username=; expires=Thu, 31 Dec 2019 12:00:00 UTC;path=/"

 

值得注意的是,对于每个请求,浏览器都会向服务器返回Cookies。因此,需要将它们最小化,以减少开销。

主要亮点:

  • 高效地恢复会话、页面细节、网页线程。
  • Cookies会持续存在。因此,数据可以保存在浏览器中,直到它们被清除。
  • 可以根据特定用户的偏好进行管理并提供个性化内容。
  • 支持带通配符的跨来源。

 

2021年了,你该选择哪个浏览器存储选项?

 

就安全性而言,这些存储选项不是为了存储敏感数据而设计的。但是,在Local Storage(由受欢迎的JavaScript库支持,这些库是开放的,可以进行解释)中存储身份验证令牌(OpenID令牌)的趋势越来越明显。Cookie在保留会话标识符方面有一个例外,这是专门为其存储而设计的。

此外,需要注意的是,Safari中的私人浏览(匿名)不允许用户访问Local Storage或Session Storage。因此,如果你继续使用这些存储选项,处理错误情况并向用户显示相关消息是非常重要的。

选择存储选项时,如果只需存储简单的键值对,Local Storage是不错的选择。如果你计划对浏览器选项卡确定稍微好一点的安全范围,可以选择Session Storage。在选择这两个选项之前,请记住存储限制。

对于任何高级存储需求,你都可以使用IndexedDB,这是一种更好的数据库解决方案。

 

责任编辑:华轩 来源: 读芯术
相关推荐

2011-02-21 14:35:13

浏览器Chrome火狐

2019-07-02 15:10:58

浏览器Chrome移动端

2020-02-25 13:11:54

Edge浏览器

2011-07-11 14:12:15

浏览器

2021-03-15 08:20:15

微软Edge浏览器

2022-01-26 10:26:57

ChromeBrave网页浏览器

2020-11-17 08:07:29

存储类型浏览器

2022-01-25 19:36:46

ChromeBrave浏览器

2020-05-15 14:30:23

前端浏览器架构

2022-02-09 10:03:22

VivaldiBrave浏览器

2016-06-02 13:22:12

LinuxWeb浏览器

2021-01-30 07:50:08

Edge微软浏览器

2012-09-06 10:05:03

Windows 8浏览器

2021-08-28 06:15:49

浏览器手机浏览器夸克

2014-06-23 13:38:18

遨游浏览器

2022-05-18 07:32:00

浏览器IE系统

2020-10-22 19:37:28

360浏览器浏览器

2021-04-17 18:19:23

FlutterReact Nativ开发

2013-07-25 14:17:17

2021-03-08 05:42:26

浏览器FirefoxVIA浏览器
点赞
收藏

51CTO技术栈公众号