前端存储总结

た入场券 2023-02-21 06:21 11阅读 0赞

## 一、题记：你除了用过 Cookies、localStorage 和 sessionStorage 外，还有用过其它的存储方式么？其实除了前面提到的 3 种存储方式，目前主流的浏览器还支持 Web SQL 和 IndexedDB。 ##

## 二、Sharedb ##

开源地址：[https://github.com/share/sharedb][https_github.com_share_sharedb]

ShareDB是基于JSON文档的操作转换（OT）的实时数据库后端。它是DerbyJS Web应用程序框架的实时后端，共享数据库。

应用：

实时查询订阅、实时排行榜、点赞等。

## 三、 ImmortalDB ##

开源地址：[https://github.com/gruns/ImmortalDB][https_github.com_gruns_ImmortalDB]

ImmortalDB是在浏览器中存储持久键值数据的最佳方法。保存到ImmortalDB的数据被冗余地存储在 Cookies， IndexedDB和 LocalStorage中，并且如果其中的任何数据被删除或损坏，它们将不断进行自我修复。

应用：

清除cookie是常见的用户操作，即使对于非技术用户也是如此。浏览器会毫不客气地 删除 IndexedDB，LocalStorage和/或SessionStorage，而不会在存储压力下发出警告。

## 四、web-storage-cache ##

开源地址：[https://github.com/wuchangming/web-storage-cache][https_github.com_wuchangming_web-storage-cache]

WebStorageCache对HTML5 localStorage 和sessionStorage进行了扩展，添加了超时时间，序列化方法。可以直接存储json对象，同时可以非常简单的进行超时时间的设置。

优化：

WebStorageCache自动清除访问的过期数据，避免了过期数据的累积。另外也提供了清除全部过期数据的方法：wsCache.deleteAllExpires();

## 五、lz-string ##

开源地址：[https://github.com/pieroxy/lz-string/][https_github.com_pieroxy_lz-string]

基于LZ的JavaScript压缩算法

应用：

lz-string 旨在满足在 localStorage 中（尤其是在移动设备上）存储大量数据的需求。localStorage 通常限制为 5MB ~10MB，你可以通过对数据进行压缩，以存储更多的数据。

## 六、localForage ##

开源地址：[https://github.com/localForage/localForage][https_github.com_localForage_localForage]

localForage是一个快速，简单的JavaScript存储库。localForage通过使用具有简单类似localStorageAPI的异步存储（IndexedDB或WebSQL）来改善Web应用程序的脱机体验。localForage在不支持IndexedDB或WebSQL的浏览器中使用localStorag。此外，localForage 还支持存储所有可以序列化为 JSON 的原生 JS 对象以及 ArrayBuffers，Blob 和 TypedArrays。

## 七、PouchDB ##

开源地址：[https://github.com/pouchdb/pouchdb][https_github.com_pouchdb_pouchdb]

PouchDB是一个受Apache CouchDB启发的开源JavaScript数据库，旨在在浏览器中良好运行。  
PouchDB的创建是为了帮助Web开发人员构建脱机工作以及在线工作的应用程序。  
PouchDB 是一个浏览器内数据库，允许应用程序在本地保存数据，以便用户即使在离线时也可以享受应用程序的所有功能。另外，数据在客户端之间是同步的，因此用户可以随时随地保持最新状态。  
PouchDB 也在 Node.js 中运行，可以用作与 「CouchDB」 兼容的服务器的直接接口。该 API 在每个环境中工作都是相同的，因此你可以花更少的时间来担心浏览器的差异，而花更多的时间来编写干净、一致的代码。  
PouchDB 在幕后使用 IndexedDB，若当前环境不支持 IndexedDB 则回退到 Web SQL。

官网：[https://pouchdb.com/][https_pouchdb.com]

## 八、 Rxdb ##

开源地址：[https://github.com/pubkey/rxdb][https_github.com_pubkey_rxdb]

RXDB是一个的NoSQL数据库为JavaScript应用，如网站，混合应用程序，电子-应用，逐行Web应用程序和的NodeJS。响应式意味着您不仅可以查询当前状态，还可以订阅所有状态更改，例如查询结果甚至文档的单个字段。这对于基于UI的实时应用程序非常有用，因为它易于开发，并且具有很大的性能优势。为了在客户端和服务器之间复制数据，RxDB提供了用于与任何CouchDB兼容端点以及自定义GraphQL端点进行实时复制的模块。

应用：

对浏览器，nodejs，electron，cordova，react-native和所有其他javascript运行时的多平台支持  
基于RxJS的反应式数据处理  
离线首先使您的应用在用户没有互联网时仍能正常工作  
加密单个数据字段以保护用户数据  
导入/导出数据库状态（json），非常适合使用TDD进行编码

## 九、NeDB ##

开源地址：[https://github.com/louischatriot/nedb][https_github.com_louischatriot_nedb]

适用于Node.js，nw.js，Electron和浏览器的嵌入式持久性数据库或内存数据库，100％JavaScript，无二进制依赖性。API是MongoDB的子集，并且速度非常快。

应用：

插入：10,680 ops/s  
查找：43,290 ops/s  
更新：8,000 ops/s。  
删除：11,750 ops/s。  
ops (operation per second) 即表示每秒操作的次数。

## 十、Dexie.js ##

开源地址：[https://github.com/dfahlander/Dexie.js][https_github.com_dfahlander_Dexie.js]

Dexie.js是indexedDB（浏览器中的标准数据库）的包装库。

官网：[http://dexie.org][http_dexie.org]

应用：

模棱两可的错误处理  
查询不佳  
代码复杂度

Dexie提供了一种经过整理的API，具有经过深思熟虑的API设计，强大的错误处理，可扩展性，更改跟踪意识和扩展的KeyRange支持（不区分大小写的搜索，集合匹配和或操作）。

## 十一、Cookie ##

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。

核心：

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）；  
个性化设置（如用户自定义设置、主题等）；  
浏览器行为跟踪（如跟踪分析用户行为等）。

特点：

Cookie 的大小受限，一般为 4 KB；  
同一个域名下存放 Cookie 的个数是有限制的，不同浏览器的个数不一样，一般为 20 个；  
Cookie 支持设置过期时间，当过期时自动销毁；  
每次发起同域下的 HTTP 请求时，都会携带当前域名下的 Cookie；  
支持设置为 HttpOnly，防止 Cookie 被客户端的 JavaScript 访问。

## 十二、 localStorage ##

一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。它是采用键值对的方式存储数据，按域名将数据分别保存到对应数据库文件里。相比 Cookie 来说，它能保存更大的数据。

特点：

大小限制为 5MB ~10MB；  
在同源的所有标签页和窗口之间共享数据；  
数据仅保存在客户端，不与服务器进行通信；  
数据持久存在且不会过期，重启浏览器后仍然存在；  
对数据的操作是同步的。

## 十三、sessionStorage ##

与服务端的 session 类似，sessionStorage 是一种会话级别的缓存，关闭浏览器时数据会被清除。需要注意的是 sessionStorage 的作用域是窗口级别的，也就是说不同窗口之间保存的 sessionStorage 数据是不能共享的。

特点：

sessionStorage 的数据只存在于当前浏览器的标签页；  
数据在页面刷新后依然存在，但在关闭浏览器标签页之后数据就会被清除；  
与 localStorage 拥有统一的 API 接口；  
对数据的操作是同步的。

## 十四、Web SQL ##

Web SQL 数据库 API 实际上不是 HTML5 规范的一部分，而是一个单独的规范，它引入了一组 API 来使用 SQL 来操作客户端数据库。需要注意的是，HTML5 已经放弃 Web SQL 数据库。

核心：

openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象；  
transaction：这个方法允许我们根据情况控制事务的提交或回滚；  
executeSql：这个方法用于执行真实的 SQL 语句。

特点：

Web SQL 能方便进行对象存储；  
Web SQL 支持事务，能方便地进行数据查询和数据处理操作。

## 十五、IndexedDB ##

IndexedDB 是一种底层 API，用于客户端存储大量结构化数据，包括文件、二进制大型对象。该 API 使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太好用。IndexedDB 提供了一个解决方案。

特点：

存储空间大：存储空间可以达到几百兆甚至更多；  
支持二进制存储：它不仅可以存储字符串，而且还可以存储二进制数据；  
IndexedDB 有同源限制，每一个数据库只能在自身域名下能访问，不能跨域名访问；  
支持事务型：IndexedDB 执行的操作会按照事务来分组的，在一个事务中，要么所有的操作都成功，要么所有的操作都失败；  
键值对存储：IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以 “键值对” 的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。  
数据操作是异步的：使用 IndexedDB 执行的操作是异步执行的，以免阻塞应用程序。

## 十六、lowdb（Local JSON Database） ##

开源地址：[https://github.com/typicode/lowdb][https_github.com_typicode_lowdb]

适用于Node，Electron和浏览器的小型JSON数据库。由Lodash驱动。  
一般而言，Lowdb非常适合CLI，小型服务器，Electron应用程序和npm软件包  
重要的 lowdb不支持集群，并且可能与非常大的JSON文件（约200MB）有关。

## 十七、Lovefield（Relational Database） ##

开源地址：[https://github.com/google/lovefield][https_github.com_google_lovefield]

Lovefield是用纯JavaScript编写的关系数据库。它提供类似SQL的语法并可以跨浏览器运行（当前支持Chrome 37 +，Firefox 31 +，IE 11 +，Edge和Safari 10+）。

## 十八、LokiJS（NoSQL Database） ##

开源地址：[https://github.com/techfort/LokiJS][https_github.com_techfort_LokiJS]

LokiJS 是一个内存中的 JavaScript 数据库，提供非常高的性能。支持字段索引用于快速访问和近乎 50万/每秒 的操作数。内建 DynamicView 类可提供更高性能的数据子集访问。  
LokiJS 支持集合，类似 MongoDB，数据可保持到磁盘的 JSON 格式，兼容 Node.js 和浏览器。

## 十九、AlaSQL ##

开源地址：[https://github.com/agershun/alasql][https_github.com_agershun_alasql]

Alasql 是JavaScript的开放源代码SQL数据库，重点关注关系数据和无模式数据的查询速度和数据源灵活性。它可以在Web浏览器，Node.js和移动应用程序中使用。

应用：

胖客户端上针对BI和ERP应用程序的快速内存SQL数据处理  
通过多种格式的数据导入/操作/导出，轻松实现ETL和持久性选项  
所有主要的浏览器，Node.js和移动应用程序

## 二十、lscache ##

开源地址：[https://github.com/pamelafox/lscache][https_github.com_pamelafox_lscache]

这是一个简单的库，memcache可使用HTML5 模拟功能localStorage，因此您可以在客户端上缓存数据，并将到期时间与每个数据相关联。如果localStorage超过了限制（〜5MB），它将尝试通过删除最接近到期的项目来创建空间。如果localStorage浏览器中根本没有可用的库，则该库将由于不进行缓存而降级，并且所有缓存请求均返回null。

## 二十一、basket.js ##

开源地址：[https://github.com/addyosmani/basket.js][https_github.com_addyosmani_basket.js]

Basket.js是一个脚本和资源加载器，用于使用localStorage缓存和加载脚本  
现代Web应用程序通常将使用多个JavaScript或CSS框架。随着脚本数量的增加，HTTP请求数量也随之增加。这导致页面加载时间增加和性能降低。Basket.js是致力于缓解此问题的项目。  
Basket.js将您站点的脚本加载到页面中，并将其保存在localStorage中，以便在会话结束后可以重用它们，直到它们过期为止。它还检查脚本是否已经在localStorage中，如果没有，则将其加载。这样可以防止不必要地重新加载脚本，并可以改善加载时间和网站性能。

参考：[https://mp.weixin.qq.com/s/aSsHeIDHSgsI1L85Iok27g][https_mp.weixin.qq.com_s_aSsHeIDHSgsI1L85Iok27g]

[https_github.com_share_sharedb]: https://github.com/share/sharedb
[https_github.com_gruns_ImmortalDB]: https://github.com/gruns/ImmortalDB
[https_github.com_wuchangming_web-storage-cache]: https://github.com/wuchangming/web-storage-cache
[https_github.com_pieroxy_lz-string]: https://github.com/pieroxy/lz-string/
[https_github.com_localForage_localForage]: https://github.com/localForage/localForage
[https_github.com_pouchdb_pouchdb]: https://github.com/pouchdb/pouchdb
[https_pouchdb.com]: https://pouchdb.com/
[https_github.com_pubkey_rxdb]: https://github.com/pubkey/rxdb
[https_github.com_louischatriot_nedb]: https://github.com/louischatriot/nedb
[https_github.com_dfahlander_Dexie.js]: https://github.com/dfahlander/Dexie.js
[http_dexie.org]: http://dexie.org
[https_github.com_typicode_lowdb]: https://github.com/typicode/lowdb
[https_github.com_google_lovefield]: https://github.com/google/lovefield
[https_github.com_techfort_LokiJS]: https://github.com/techfort/LokiJS
[https_github.com_agershun_alasql]: https://github.com/agershun/alasql
[https_github.com_pamelafox_lscache]: https://github.com/pamelafox/lscache
[https_github.com_addyosmani_basket.js]: https://github.com/addyosmani/basket.js
[https_mp.weixin.qq.com_s_aSsHeIDHSgsI1L85Iok27g]: https://mp.weixin.qq.com/s/aSsHeIDHSgsI1L85Iok27g