如何保持JavaScript Web应用程序的状态？

Question

假设我正在用JavaScript编写一个简单的单页Web应用程序。应用程序只显示员工记录。用户输入搜索参数，应用程序使用AJAX从服务器获取员工记录，并将其显示在网页中。

申请状态为search params和employees。如何将它们存储在应用程序中？我看到两个选择：

• 只需使用DOM隐式存储状态。
• 为search params和employees创建数据结构，并与DOM同步。

有意义吗？这两种选择的优缺点是什么？

Answer 1

如果您的目标是现代浏览器，那么Web Storage将是一个很好的选择。

在这里写好：http://sixrevisions.com/html/introduction-web-storage/

这样，所有负载都将保留在客户端内，并且数据将在请求之间保持不变，如果用户离开并返回应用程序。

您提到的选项我猜是否意味着您将数据存储在隐藏的DOM元素中将很容易开发，但是您将失去所有持久性。如果您要沿着这条路走下去，为什么不直接将数据存储在javascript对象中呢？

另一个好读：http://diveintohtml5.info/storage.html

Answer 2

如果你想要它们是持久的，你不能使用DOM，你不应该。 HTML适用于您的用户界面并将所有内容链接在一起，而不是用于应用的数据存储。你有几个选择。您可以在JavaScript中使用全局变量，但必须记住，在访问您的网页之间，他们不会持续存在。如果这是你想要的，请继续。

另一个选择是使用HTML5的本地存储，它是持久的，专为存储数据而设计。

您的最后一个选项，如果您不想在本地存储数据但又想要保留数据，这一点非常重要，那就是使用HTTP AJAX GET和POST与servlet或客户端上的东西获取并设置数据分别。

如果您想采用旧方式，您还可以使用Cookie而不是Web存储。我当然建议晚些时候。

Answer 3

如果您使用HTML 5，则可以考虑使用此类杠杆：

http://www.jstorage.info/

Answer 4

绝对是后者。 DOM从未被设计为数据结构。另一方面，创建一个架构以使DOM与您的自定义数据结构保持同步可能会很痛苦。

幸运的是，有一些框架可以帮助你解决这个问题。其中大多数都遵循MVC-（或MV *） - 类似设计模式。示例包括Backbone.js，AngularJS，Spine，Agility.js，JavaScriptMVC等等。环顾四周。

同时查看此项目：TodoMVC。它可能会帮助您决定是否使用这样的框架，如果是这样，哪一个。

Answer 5

• 在这种情况下，您可以在用户应用过滤器时触发哈希值的更改。例如： http://www.mydomain.com/index.html#name=abc&department=def。您的应用会侦听哈希中的更改以进行相应更新。像crossroads.js，sammy.js这样的图书馆允许您这样做。客户端的这种方法借用了服务器端的路由概念。

• 使用这种方法，您可以将网址发送给您的朋友，直接“跳转”到您的应用程序的特定状态，您也可以重复使用它，将其存储在任何地方。