使用AmplifyJS简化了网络存储

分享于 

19分钟阅读

Web开发

  繁體 雙語

介绍

作为使网站以丰富客户端方式运行的驱动器继续,缓存数据的需求大大增加。 HTML5标准的一个offshoots是Web存储,一个持久的数据存储 API。 Web存储实际上有两种风格: 本地存储和会话存储。 在这两个存储机制中,数据可以存储在客户机的机器上供以后的网站使用。

在本文中,我想为那些不熟悉它的人提供一个简单的网络存储。 不过,在深入了解API的细节之前,我想解决一些网络存储可以使用的领域。 一旦我们讨论了所有这些基本信息,我想直接跳入AmplifyJS以及如何使用Web存储。 然后,我将处理我们的网络存储用例,以展示AmplifyJS如何解决这些问题。

我为什么要关心网络存储

没有好用例的技术只是一个玩具。 有许多优秀的Web存储用例。 下面是一些基本的用例,这些用例代表了我面对的真实世界问题:

场景一- 填充下拉菜单

你有一个网站,它的中包含多个下拉菜单,该菜单在站点的多个页面上使用并且不经常。 可以将数据服务器端缓存为会话,但这会导致服务器上的问题,这取决于这样的大小和数量。 这里外,每次用户在新会话中访问你的站点时都必须按数据库来填充你的模型。 使用本地存储,可以在客户端缓存下拉数据,并从缓存中提取数据,而不是每次都从服务器拉取。 这减少了数据库服务器上的点击次数,同时也减轻了web服务器的压力。

场景2 - 长格式数据

网站上有一个包含大量要填写的字段的网页。 有时,填写表单时,用户会意识到他们需要更多的信息。 由于表单不完整,因此无法将它的发布为。 他们必须把所有的数据都填完后才能填完。 他们可以用本地存储来填写自己知道的内容并在本地保存。 他们可以明天回到表单,或者每当获得它的余的信息并拿起他们离开的地方。

我们可以看到它的他的方案,包括离线或者半连接的Web应用程序,但是这些应用程序。

Web存储概述

Web存储是在浏览器存储中的key-value 对中存储数据的。 虽然标准还没有确定,但建议的存储空间为 5 MB。 这是对 Cookies的重大升级,它限制在 4 k。 这里存储限制为每个站点,并且是沙盒。 站点是由以下条件定义的:

  • 按域 NAME ( 例如 microsoft.com)
  • 按子域 NAME ( 例如 contoso.microsoft.com) )
  • 按协议( 例如http或者 https )
  • 按浏览器( 如 Chrome 或者 Safari )
  • 通过浏览会话类型( 例如。 正常或者专用)

这就意味着,如果所有 上面 都不是 MATCH,那么你将得到一个新的Web存储池来播放。 这对几个原因来说是好的。 首先,你将不会以不安全的方式使用数据交叉边界。 其次,你可以完全控制缓存中的数据,而不必担心影响其他站点。

这里总是有一个安全的概念。 缓存中的数据有多安全? 答案是,它根本不安全。 只将数据放入你可以阅读的网页存储中。 所有数据均以纯文本格式存储。

本地存储 vs 会话存储

本地存储和会话存储之间的区别很容易理解。 会话存储只能持久保存,而会话存储仅持续于会话的长度。 然而,这里有一些棘手的事情需要注意。 首先,通常会话在浏览器打开时受到限制,W3C标准允许在崩溃后恢复会话。 这意味着会话数据可以能存在于( 这是浏览器相关的) 中。 它的次,本地存储仍然被用户( 清除浏览器缓存) 清除,这意味着你不能依赖于总是存在的数据。

浏览器支持

浏览器对网络存储的支持比较好。 所有主流浏览器都支持本地存储和网络存储。 IE 8 Firefox 和Android支持本地存储和会话存储,其中一个例外就是支持会话存储,只支持会话存储,只支持从版本 2开始。 然而,这引发了不兼容的浏览器版本回退的问题。 这就是为什么我非常激动地将AmplifyJS库引入到这个讨论中。

AmplifyJS概述

AmplifyJS使用一个非常优雅的回退来处理Web存储的所有管道,这对开发人员来说是透明的。 支持 Firefox 2 -3的全局存储,IE 5的UserData,以及所有其他不兼容浏览器的内存存储。 这意味着开发人员不需要处理如何优雅地退回,而且不需要将所有浏览器检查到代码( 当我意识到我开始跳舞时)。

要将AmplifyJS添加到网站,只需从 http://amplifyjs.com. 网站下载最新版本的AmplifyJS (。完整版本或者仅存储部分),可以访问 https://github.com/appendto/amplify 页面访问整个项目。 下载了需要的文件后,将需要的JS文件添加到项目中,如下所示:

<scriptsrc="./Scripts/amplify.min.js"type="text/javascript"></script>

要在AmplifyJS中存储数据,一旦将脚本带入web应用程序,就需要编写一行 JavaScript:

amplify.store(dataId, data);

就是这样现在你的数据存储在网络存储(。或者你可以使用的最高兼容存储级别) 中。 dataId是一个唯一标识符,你将使用它来访问数据。 小心,因为如果你再次使用相同的dataId,你可以覆盖数据。 存储在网络存储中的数据是可以序列化的任何数据。

要使数据从网络存储中恢复,它又是一行代码:

var data = amplify.store(dataId);

请注意,你仍然调用存储方法,但这一次只是传入所需数据的唯一标识符。 这里方法的输出为你的数据。

有关Web存储的大约 90%个用例,这两行代码将是你所需要的。 所有与使用切削边缘web技术相关的管道都已经消除,剩下的是一个简洁简单的实现。

AmplifyJS的高级选项

库中有一些额外的选项需要在需要时讨论这些选项。 首先是选择特定存储机制的选项。 尽管这取消了大量的AmplifyJS,但是有可以能有时候这样做是有用的。 要指定存储机制,请使用下面的代码行:

amplify.store.sessionStorage(dataId, data);

注意使用"sessionstorage"方法而不是 root"商店"方法。 你可以在这里替换任何你想要的类型,( sessionStorage,globalStorage,userData或者内存)。 请务必注意,你需要检查特定存储机制的可以用性,否则将在任何不支持该机制的浏览器中获得错误。

接下来是在指定的时间之后使数据过期的选项。 要指定数据超时,请在存储类似这样的数据时,向该方法添加第三个参数:

amplify.store(dataId, data, { expires: 60000 });

注意这个数字以毫秒为单位,表示从现在开始数据过期的时间。 因此,在我的示例中,数据将在一分钟后过期。 然而,这种过期是特定于使用AmplifyJS库的。 当它查找数据时,它确定它没有过期。 如果要避开AmplifyJS并直接查找数据,它仍然存在。 这不是一个问题,因为你不会在Web存储中存储敏感数据,但是这是一些理解的方法。

这就产生了关于AmplifyJS如何存储数据的一点。 为了使数据与存储在网络存储中的"常规"数据保持分离,所有id都有"__amplify_ _"前缀。 如果使用"名字"的,来直接存储在Web存储中的某些东西,然后使用AmplifyJS存储一个"名字"。 这是一个很好的安全措施。 如果你直接访问Web存储并通过AmplifyJS进行访问,你可以能不确保密钥是唯一的。 很可能站点的不同部分是由两个不同的开发者开发的。 如果没有做到这一点,那么 phantom Bug 可能会导致调试。

下一个高级功能并不是真正的。 当你想从存储中删除项目时可能出现这种情况。 为这里,只需为每个要擦除的键存储空值,如下所示:

amplify.store(dataId, null);

清除数据并重新输入要使用的标识。 如果要清除所有数据,可以通过每个to循环,或者使用存储特定选项清除数据。

这就引出了我要讨论的最后一个话题,那就是当存储满了的时候要做什么。 由于你有限量的空间( 通常 5 MB ),存储场所可能会满足。 发生这种情况时,AmplifyJS将抛出"超过 amplify.store 配额"错误。 但是,在抛出这里错误之前,它将首先清除所有过期的数据,然后再次尝试操作。

处理用例

让我们深入探讨实际的示例代码,以解决每个问题,这样我们可以看到AmplifyJS在网站上使用。

场景一- 填充下拉菜单

我们决定在每次会话的服务器上缓存数据时,我们会经常为下拉列表打开数据库。 为了减少这些问题,我们将在客户端存储列表,以提高站点性能,以减少数据库和web服务器负载。 为此,我们将首先通过网络存储在客户端上填充下拉列表。 如果数据不在Web存储( 或者如果过期了) 中,我们将对服务器进行Ajax调用来加载数据并填充Web存储。

我要做的第一件事是检查列表是否在网络存储中。 如果是的话,我将使用该数据填充下拉列表。 如果它不在网络存储中,我将使用AJAX来调用数据库。 然后我将在网络存储中保存这些数据并填充下拉列表。 下面是这样做的代码:

//Populates the Vehicle List dropdownif (amplify.store("vehiclelist")) {
 loadDropdownData(amplify.store("vehiclelist"));
 toastr.info("Used LocalStorage for Vehicle List");
}else {
 $.ajax({
 type: "GET",
 url: "/Content/VehicleList.txt",
 data: "" dataType: "json",
 cache: false,
 success: function (data) {
 amplify.store("vehiclelist", data, { expires: 86400000 });
 toastr.info("Used Ajax call for Vehicle List");
 loadDropdownData(data);
 }
 });
}

在这个代码中有几个需要注意的事项。 首先,我使用ToastrJS库弹出消息,让你知道数据来自哪里。 这样你就可以看到发生的事情,因为表单只能在数据来自哪里工作。 第二,我对一天的数据使用了超时。 当我下次询问 24-hour 期间之后的数据时,将刷新数据并加载新数据。 finally,注意我将整个JSON响应存储在Web存储中。 我现在可以从Web存储中访问这些结果,如果我只是从服务器直接从服务器获取它们。

现在,下拉列表将每天从数据库中填充一次。 我们没有缓存web服务器上的任何下拉数据,并且我们不会重复对数据库进行同样的数据打击。 在某些情况下,这对我们的资源是一个巨大的好处。 我们还增加了减少线路上的流量的额外好处。

场景2 - 长格式数据

我们的用户抱怨员工调查太长,无法在一个坐标中进行。 我们将网站视为多个"页面",但是它仍然是一种形式,我们不想将数据提交到服务器。 为了解决这个问题,我们将在用户离开输入时存储每个输入的内容。 这样,如果用户决定填写一个"页面"数据并明天回调,那么今天的数据仍然存在。

用AmplifyJS实现这一点非常。 当用户离开字段( 模糊事件) 时,我们将存储任何输入。 但是,为了更加有意地使事情更加有意,我决定我们应该将一个名为 storedata的类添加到。 这样我们就可以轻易忽略某些不希望存储( 例如密码字段)的字段。 我还决定我们应该使用表单for下划线作为存储数据的键 NAME。 例如如果在表单中包含带有 EmployeeForm ID的输入,那么存储该特定数据的键将是" EmployeeForm_FirstName"。 这样我们就不会遇到冲突,如果我们的站点上有多个名字的名字。 如果我们的两个表单都有相同的标识,这将是一个问题。

以下是完成这里任务的代码:

//Stores data for all input items that are marked with the storedata class$(document).on("blur", "form input.storedata", function () {
 StoreChangedData($(this).closest('form').attr('id') + '_' + $(this).attr('id'), $(this).val());
});

请注意,我们进入模糊事件,该事件的任何输入都有一个表单的storedata inside。 当用户离开特定的输入时,模糊事件会激发。 当它们完成时,我们将调用 StoreChangedData 方法,然后传递两个值: 钥匙和价值。 这就是我们构建表单id下划线输入id的地方。

StoreChangedData 方法是为了减少存储事件触发的次数而创建的。 如果我们只在模糊事件中调用 amplify.store 方法,我们将在每次用户离开字段时存储"新建"数据。 我写了一个方法来比较数据,看看我们是否需要存储新数据。 下面是该方法:

function StoreChangedData(id, data) {
 var curr = amplify.store(id);
 //Only stores the data if it has changed (so we don't fire extra storage events)if (curr!== data) {
 amplify.store(id, data);
 }
}

我首先从网络存储加载数据( 使用 var curr = amplify.store(id); 然后我将数据与传递到该方法的数据进行比较。 如果它们不相同,我使用AmplifyJS将数据存储在网络存储中。 我选择不放在这里,因为这个练习的点是允许用户重新查看表格,并完成它。 但是,如果需要,可以在这里对数据进行超时处理。

现在当用户开始填写我们的巨型表单时,数据将被保存,直到他们准备提交它。 任何我们不想保存的字段都将被忽略,因为我们的代码将只保存具有 storedata 类的输入字段。 此外,当用户打开表单时,存储的数据将被加载到窗体上。

示例项目

我在本文中附加了一个示例项目,演示了我们的。 我使用html页面和虚拟JSON数据构建了示例,但是你可以使用像 ASP.NET MVC这样更复杂的东西创建相同的。 在我的测试中,我使用 ASP.NET MVC来设置和演示AmplifyJS和Web存储的所有功能。

我附加代码中的代码被大量记录以帮助你理解所发生的事情。 它跟随我在本文中给出的示例,因此应该很容易遵循。 请注意,我为本文开发的示例纯粹是为了演示目的。 这不是生产代码。 我已经删除了所有"正常"代码,以便告诉你如何使用AmplifyJS而不使你混淆。

最后,我加入了许多对ToastrJS的调用。 这些消息只是向你展示了 behind 场景中发生了什么。 这些代码行对于代码的成功是不必要的。 你可以放心地移除它们,一旦你觉得你知道发生了什么。

结束语

网络存储是一项很好的技术,在现实世界中有许多实际应用。 AmplifyJS解决了我们在Web存储中的许多问题,包括如何优化旧浏览器中支持的存储机制。 使用这样一个简单的解决方案来缓存客户端的数据,现在是开始使用AmplifyJS的最佳时间了。

参考:

W3C网络存储推荐- http://www.w3.org/TR/webstorage

AmplifyJS主页 http://amplifyjs.com

AmplifyJS GitHub页面 https://github.com/appendto/amplify

历史记录

  • 1,2013 - 初始版本。

WEB  存储  amp  Web存储  AMPL  Amplifyjs  
相关文章