9 JavaScript库，用于使用本地存储

HTML5本地存储API（Web存储的一部分）拥有极佳的浏览器支持率，并在越来越多的应用程序中得到应用。它拥有简单的API，但也存在一些类似于cookie的缺点。

过去一年左右，我遇到过不少使用localStorage API的工具和库，因此我将它们整理到这篇文章中，并附带一些代码示例和功能讨论。

要点

• HTML5本地存储API得到了广泛支持，并在应用程序中越来越常用，但它也有一些类似于cookie的局限性。各种JavaScript库已被开发出来以改进和扩展其功能。
• Lockr、store.js和lscache等库为localStorage API提供了包装器，提供了额外的使用方法和功能。这些包括存储不同数据类型而无需手动转换、更深入的浏览器支持以及对内存对象缓存系统Memcached的模拟。
• secStore.js和localForage等一些库提供了更专业的功能。secStore.js通过Stanford Javascript Crypto Library增加了一层安全性，而Mozilla构建的localForage则提供了一个使用IndexedDB或WebSQL的异步存储API。
• Basil.js和lz-string等其他库提供了独特的功能。Basil.js是一个统一的localStorage、sessionStorage和cookie API，允许定义命名空间、存储方法优先级和默认存储。lz-string允许通过压缩在localStorage中存储大量数据。

Lockr

Lockr是localStorage API的包装器，允许您使用许多有用的方法和功能。例如，虽然localStorage仅限于存储字符串，但Lockr允许您存储不同数据类型，而无需自行进行转换：

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

其他功能包括：

• 使用Lockr.get()方法检索所有键值对
• 使用Lockr.getAll()方法将所有键值对编译成数组
• 使用Lockr.flush()方法删除所有存储的键值对
• 使用Lockr.sadd和Lockr.srem在哈希键下添加/删除值

本地存储桥接器 (The Local Storage Bridge)

一个1KB的库，用于使用localStorage作为通信通道来促进同一浏览器中选项卡之间的消息交换。包含库后，以下是您可以使用的示例代码：

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

如所示，send()方法创建并发送消息，subscribe()方法允许您监听指定的消息。您可以在这篇博文中阅读更多关于该库的信息。

Barn

这个库提供了一个类似Redis的API，在localStorage之上提供了一个“快速、原子化的持久存储层”。以下是从repo的README中获取的示例代码片段。它演示了许多可用的方法。

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

API的其他功能包括能够使用起始/结束值获取范围、获取项目数组以及压缩整个数据存储以节省空间。该repo包含所有方法及其功能的完整参考。

store.js

这是一个类似于Lockr的另一个包装器，但这次通过回退提供了更深入的浏览器支持。README解释说，“store.js在可用时使用localStorage，并在IE6和IE7中回退到userData行为。没有Flash来减慢页面加载速度。没有cookie来增加网络请求的负担。”

基本API在以下代码中的注释中进行了解释：

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

此外，还有一些更高级的功能：

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

GitHub repo上的README详细介绍了浏览器支持的深度以及需要考虑的潜在错误和陷阱（例如，某些浏览器不允许在隐私模式下使用本地存储）。

lscache

lscache是另一个localStorage包装器，但具有一些额外功能。您可以将其用作简单的localStorage API，也可以使用模拟Memcached（内存对象缓存系统）的功能。

lscache公开了以下方法，在代码中的注释中进行了描述：

// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');

// 获取'website'
store.get('website');

// 删除'website'
store.remove('website');

// 清除所有键
store.clear();

与之前的库一样，这个库也处理序列化，因此您可以存储和检索对象：

// 存储对象字面量；在后台使用JSON.stringify
store.set('website', {
  name: 'SitePoint',
  loves: 'CSS'
});

// 获取存储的对象；在后台使用JSON.parse
var website = store.get('website');
console.log(website.name + ' loves ' + website.loves);

// 获取所有存储的值
console.log(store.getAll());

// 循环遍历所有存储的值
store.forEach(function(key, val) {
  console.log(key, val);
});

最后，lscache允许您将数据划分到“桶”中。看看这段代码：

// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);

// 获取并显示问候语
console.log(lscache.get('greeting'));

// 删除问候语
lscache.remove('greeting');

// 刷新整个缓存项目
lscache.flush();

// 只刷新过期的项目
lscache.flushExpired();

请注意，在第二个日志中，结果为null。这是因为我在记录结果之前设置了一个自定义桶。一旦我设置了一个桶，在此之前添加到lscache的任何内容都将无法访问，即使我尝试刷新它也是如此。只有“other”桶中的项目是可访问或可刷新的。然后，当我重置桶时，我能够再次访问我的原始数据。

secStore.js

secStore.js是一个数据存储API，它通过Stanford Javascript Crypto Library添加了一层可选的安全层。secStore.js允许您选择存储方法：localStorage、sessionStorage或cookie。要使用secStore.js，您还必须包含前面提到的sjcl.js库。

以下是一个示例，演示如何在将encrypt选项设置为“true”的情况下保存一些数据：

lscache.set('website', {
  'name': 'SitePoint',
  'category': 'CSS'
}, 4);

// 从对象中检索数据
console.log(lscache.get('website').name);
console.log(lscache.get('website').category);

请注意使用的set()方法，它传入您指定的选项（包括自定义数据）以及允许您测试结果的回调函数。然后，我们可以使用get()方法检索该数据：

lscache.set('website', 'SitePoint', 2);
console.log(lscache.get('website')); // 'SitePoint'

lscache.setBucket('other');
console.log(lscache.get('website')); // null

lscache.resetBucket();
console.log(lscache.get('website')); // 'SitePoint'

如果您想使用sessionStorage或cookie而不是secStore.js中的localStorage，您可以在选项中定义：

var storage = new secStore;
var options = {
    encrypt: true,
      data: {
        key: 'data goes here'
      }
    };

storage.set(options, function(err, results) {
  if (err) throw err;
  console.log(results);
});

localForage

这个由Mozilla构建的库为您提供了一个简单的类似localStorage的API，但通过IndexedDB或WebSQL使用异步存储。API与localStorage（getItem()、setItem()等）完全相同，只是它的API是异步的，语法需要使用回调。

因此，例如，无论您设置还是获取值，您都不会获得返回值，但您可以处理传递给回调函数的数据，并且（可选）处理错误：

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

关于localForage的其他一些要点：

• 支持使用JavaScript Promise
• 与其他库一样，不仅限于存储字符串，还可以设置和获取对象
• 允许您使用config()方法设置数据库信息

Basil.js

Basil.js被描述为一个统一的localStorage、sessionStorage和cookie API，它包含一些独特且非常易于使用的功能。基本方法可以按如下所示使用：

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

您还可以使用Basil.js来测试localStorage是否可用：

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

Basil.js还允许您使用cookie或sessionStorage：

// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');

// 获取'website'
store.get('website');

// 删除'website'
store.remove('website');

// 清除所有键
store.clear();

最后，在选项对象中，您可以使用选项对象定义以下内容：

• 数据不同部分的命名空间
• 要使用的存储方法的优先级顺序
• 默认存储方法
• cookie的过期日期

// 存储对象字面量；在后台使用JSON.stringify
store.set('website', {
  name: 'SitePoint',
  loves: 'CSS'
});

// 获取存储的对象；在后台使用JSON.parse
var website = store.get('website');
console.log(website.name + ' loves ' + website.loves);

// 获取所有存储的值
console.log(store.getAll());

// 循环遍历所有存储的值
store.forEach(function(key, val) {
  console.log(key, val);
});

lz-string

lz-string实用程序允许您通过使用压缩在localStorage中存储大量数据，并且它非常易于使用。在页面上包含库后，您可以执行以下操作：

// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);

// 获取并显示问候语
console.log(lscache.get('greeting'));

// 删除问候语
lscache.remove('greeting');

// 刷新整个缓存项目
lscache.flush();

// 只刷新过期的项目
lscache.flushExpired();

请注意compress()和decompress()方法的使用。上面代码中的注释显示了压缩前后的长度值。您可以看到这将多么有益，因为客户端存储总是空间有限。

正如库文档中所解释的，可以选择将数据压缩为Uint8Array（JavaScript中一种较新的数据类型），甚至可以压缩数据以在客户端外部存储。

值得一提的 (Honorable Mentions)

上述工具可能可以帮助您完成在localStorage中几乎所有想要做的事情，但如果您正在寻找更多内容，以下是一些您可能想要查看的更多相关工具和库。

• LokiJS – 一个快速、内存中的面向文档的数据存储，适用于node.js、浏览器和Cordova。
• AngularJS的客户端存储 – Angular JS的命名空间客户端存储。写入localStorage，并回退到cookie。除了Angular核心之外没有其他外部依赖项；不依赖于ngCookies。
• AlaSQL.js – 浏览器的JavaScript SQL数据库和Node.js。处理传统的关联表和嵌套JSON数据（NoSQL）。从localStorage、IndexedDB或Excel导出、存储和导入数据。
• angular-locker – Angular项目中本地/会话存储的简单且可配置的抽象，提供功能强大且易于使用的流畅API。
• jsCache – 使用localStorage启用JavaScript文件、CSS样式表和图像的缓存。
• LargeLocalStorage – 克服各种浏览器缺陷，在客户端提供大型键值存储。

您知道其他库吗？

如果您在localStorage API或相关工具之上构建了一些增强客户端存储的工具，请随时在评论中告诉我们。

(文章剩余部分为FAQ，已根据原文进行改写和精简，并保持原意)

关于JavaScript本地存储库的常见问题 (FAQ)

问：使用JavaScript本地存储库的好处是什么？

答：JavaScript本地存储库提供了许多好处。它们提供了一种更有效的方式来在客户端存储数据，这可以显着提高Web应用程序的性能。这些库还提供了比传统数据存储方法更高的安全级别，因为它们允许数据加密。此外，它们还为数据管理提供了更用户友好的界面，使开发人员更容易使用本地存储。

问：JavaScript中的本地存储是如何工作的？

答：JavaScript中的本地存储允许Web应用程序在Web浏览器中持久存储数据。与cookie不同，本地存储不会过期，也不会发送回服务器，这使其成为一种更有效的数据存储方法。存储在本地存储中的数据会跨浏览器会话保存，这意味着即使关闭并重新打开浏览器，它仍然可用。

问：我可以将本地存储用于敏感数据吗？

答：虽然本地存储提供了一种方便的方式来在客户端存储数据，但不建议将其用于存储敏感数据。这是因为本地存储并非设计为安全的存储机制。存储在本地存储中的数据可以使用简单的JavaScript代码轻松访问和操作。因此，不应将密码、信用卡号码或个人用户信息等敏感数据存储在本地存储中。

问：如何管理本地存储中的数据？

答：管理本地存储中的数据涉及三个主要操作：设置项目、获取项目和删除项目。要设置项目，您可以使用setItem()方法，该方法接受两个参数：键和值。要检索项目，您可以使用getItem()方法，该方法接受键作为参数并返回相应的值。要删除项目，您可以使用removeItem()方法，该方法接受键作为参数。

问：一些流行的JavaScript本地存储库有哪些？

答：有几个流行的JavaScript本地存储库，包括store.js、localForage和js-cookie。 Store.js为本地存储提供了一个简单且一致的API，并且可在所有主要浏览器上运行。 LocalForage提供了一个强大的异步存储API，并支持IndexedDB、WebSQL和localStorage。 Js-cookie是一个用于处理cookie的轻量级库，可以在本地存储不可用时用作后备。

问：如何检查本地存储是否可用？

答：您可以使用JavaScript中的简单try/catch块来检查本地存储是否可用。window.localStorage属性可用于访问本地存储对象。如果此属性存在并且可以用于设置和检索项目，则本地存储可用。

问：本地存储的存储限制是多少？

答：本地存储的存储限制因不同的浏览器而异，但通常约为5MB。这比cookie的存储限制（只有4KB）要大得多。但是，最好还是注意您在本地存储中存储的数据量，因为过多的数据可能会减慢Web应用程序的速度。

问：本地存储可以在不同的浏览器之间共享吗？

答：不可以，本地存储不能在不同的浏览器之间共享。每个Web浏览器都有自己独立的本地存储，因此在一个浏览器中存储的数据在另一个浏览器中将不可用。在设计依赖于本地存储的Web应用程序时，这一点很重要。

问：如何清除本地存储中的所有数据？

答：您可以使用clear()方法清除本地存储中的所有数据。此方法不接受任何参数，并将从本地存储中删除所有项目。使用此方法时要小心，因为它会永久删除本地存储中的所有数据。

问：本地存储可以在移动设备上使用吗？

答：可以，本地存储可以在移动设备上使用。大多数现代移动Web浏览器都支持本地存储，因此您可以在台式机和移动设备上使用它来存储数据。但是，移动设备上的存储限制可能较低，因此在设计Web应用程序时务必考虑这一点。

以上是9 JavaScript库，用于使用本地存储的详细内容。更多信息请关注PHP中文网其他相关文章！