2021年了，年该你该选择哪个浏览器存储选项？

作者：读芯术 2021-01-24 23:06:15存储 现代网络浏览器为网络应用提供多种存储选项。选择选项每个存储选项都不一样，个浏有各自的览器属性和应用。然而，存储若要根据自身需求选择合适的年该存储选项，需要对它们的选择选项属性和限制有充分的理解。本文将探究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。

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

主要亮点：

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

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

 

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

 

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保存数据。你可以在数组中查找最近的搜索，以提高可用性。

 

 

主要亮点：

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

4.Web SQL(不推荐)

最近，W3C宣布不推荐使用WebSQL规范，更好的选择是高效的indexedDB。Web SQL是遵循SQLite规范的存储。谷歌浏览器、Opera和安卓浏览器都支持这个API(注意:火狐浏览器不支持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 NOTEXISTS TestTable (id unique, data)’);  
 tr.executeSql(‘INSERT INTO TestTable(id, data) VALUES (1, “itemOne”)’);  
 tr.executeSql(‘INSERT INTO TestTable(id, data) VALUES (2, “itemTwo”)’);  
}); 

 

 

 

主要亮点：

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

5.Cookies

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

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

 

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

 

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

主要亮点：

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

 

 

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

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

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

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

 

责任编辑：华轩 来源： 读芯术 存储浏览器工具

(责任编辑：百科)