全文共3388字，预计学习时长9分钟
现代网络浏览器为网络应用提供多种存储选项。每个存储选项都不一样，有各自的属性和应用。然而，若要根据自身需求选择合适的存储选项，需要对它们的属性和限制有充分的理解。本文将探究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，这是一种更好的数据库解决方案。
留言点赞关注
我们一起分享AI学习与发展的干货
如转载，请后台留言，遵守转载规范