前端存储除了 localStorage 还有啥

本文介绍一些与前端数据存储有关，有趣、好玩、有用的开源库。除此之外，还会让你掌握各种 Web 存储方案的特点，赶紧来了解一下。

在介绍目前比较流行的一些开源的前端存储方案之前，阿宝哥先分享一些与存储有关，有趣好玩的开源库。

一、有趣好玩的开源库

1.1 Sharedb

Realtime database backend based on Operational Transformation (OT)。

https://github.com/share/sharedb

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

示例1：实时数据同步

示例2：展示实时查询的排行榜应用程序

1.2 ImmortalDB

A relentless key-value store for the browser。

https://github.com/gruns/ImmortalDB

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

例如，清除 Cookie 是一种常见的用户操作，即使对于非技术用户也是如此。在存储压力下，浏览器在没有警告的情况下随意删除 IndexedDB、localStorage 或 sessionStorage。

示例

import {
    ImmortalDB } from 'immortal-db'

await ImmortalDB.set('name', 'semlinker'); // Set
await ImmortalDB.get('name', default='lolo'); // Get
await ImmortalDB.remove('name'); // Remove 

1.3 web-storage-cache

对 localStorage 和 sessionStorage 进行了扩展，添加了超时时间，序列化方法。

https://github.com/wuchangming/web-storage-cache

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

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

示例

var wsCache = new WebStorageCache();

// 缓存字符串'wqteam' 到 'username' 中, 超时时间100秒
wsCache.set('username', 'wqteam', {
   exp : 100});

// 超时截止日期，可用使用Date类型
var nextYear = new Date();
nextYear.setFullYear(nextYear.getFullYear() + 1);
wsCache.set('username', 'wqteam', {
   exp : nextYear});

// 获取缓存中 'username' 的值
wsCache