在客户端缓存大量的JSON结果

Question

我有一个asp.net mvc应用程序，返回包含n年数据的JSON结果，然后在JavaScript图表上呈现。

为了获得良好的用户体验（性能方面），我正在寻找最佳解决方案，无论是将JSON数据缓存到客户端，还是在用户点击具有不同参数（例如日视图、周视图等）的图表��，查询相同的JSON数据而不会访问服务器。

请有经验的人士帮助我们作出最佳决策，建议采用最佳实践将数据缓存在客户端或服务器端，或者每次切换图形时直接访问数据库。

谢谢。

- Nil Pun

---

2年的数据价值多少？ 是指谷歌网络服务器日志的两年数据，还是规模更小的数据集？ - Matt

那就不要将其发送给客户端，让客户端轮询服务器。 - Matt

你是否正在寻找某种HTML/Javascript技术或缓存JSON数据的方法？如果是前者，您可以使用HTML5的localStorage和sessionStorage对象（http://www.w3schools.com/html5/html5_webstorage.asp）。 - Wilk

@Wilk，我想localStorage只支持HTML 5，但我们需要考虑所有浏览器。听起来缓存需要在服务器端完成。 - Nil Pun

Answer 1

首先，数据库在哪里？如果您在本地网络上使用千兆位局域网，则访问它不是问题。然而，在互联网上情况就不同了。人们的带宽有限，特别是在移动设备上，因此您应该限制HTTP调用。此外，较少的HTTP调用意味着对服务器的压力较小。

以下是一些提示：

• 考虑分页

  当加载“两年时间”的数据时，我想象中是很多数据，就像是 100 多页的论文。考虑将数据进行分页而不是一次性全部加载。这样可以节省带宽以及缓存空间（如果有限制的话）。

  如何实现：在服务器脚本中按照客户端需求切割数据。使用查询中的LIMIT语句可以很容易地在 SQL 中创建分页。逻辑为：starting_item = (page_needed - 1) * items_per_page

• 将数据转换成 JSON 格式

  使用 JSON 将数据传输到网络并从网络传输数据。除了轻量级之外，它还具有结构化的特点。稍后解析和存储会更加容易。

  如何实现：PHP 有一个 json_encode 函数，可以将数组转换为 JSON 字符串。我假设您的框架也有类似的功能。在页面上输出字符串，然后使用JSON.parse 将其从 JSON 字符串转换为 JS 对象。 JSON 方法在现代浏览器中原生支持，但如果需要支持旧版浏览器，则可以使用Crockford 的库来解析。

• 使用知名的存储框架

  如果需要跨页面进行缓存存储，可以使用PersistJS，它将localStorage抽象为在浏览器上可用的存储方式。此外，这里有一个LZW的JS实现。请注意localStorage使用字符串存储数据，并且具有5-10MB的限制，因此要将数据转换为字符串并使用PersistJS存储，检索时获取字符串并使用JSON.parse()解析。
  
  只有在需要时才调用缓存系统，如果数据未被修改或添加以及已经存在，则不需要调用服务器。
  
  如果担心数据过期，可以通过使用一些实时数据获取方法来使用AJAX同步缓存系统，如 Comet 所述的维基百科中描述的方法。
  
  最后两点取决于缓存框架，但BackboneJS允许其模型和集合与服务器同步，具有我提到的相同功能。

- Joseph

---

谢谢。您是否有使用您提到的技术的样例可供参考？ - Nil Pun

Answer 2

1. 从数据库中检索数据并将其保存为服务器上的静态文件。使用 .css 或 .png 扩展名。（浏览器会自动缓存样式表和图像文件。）
2. 在隐藏字段中保存带有时间戳的数据文件名。（以确保如果文件发生更改，则加载最新文件）
3. 使用 AJAX 从服务器加载文件，第一次将从服务器加载，但下一次将从浏览器缓存中加载。
4. 您可以使用 JSON.Parse() 解析 AJAX 请求结果。

- Shiyas

---

你能不能把数据保存到.js文件中呢？你可以使用本地JavaScript对象来存储数据，这样就不会“欺骗”内容类型了... - Roy Prins

Answer 3

我已经做过你试图做的事情，这是我的经验。我在工作中使用Oracle的Site Studio中间件。我寻找了一个能够与它一起工作的框架，但没有找到。所以我尝试了下面两个选项。

1）数据库查询返回一定数量的行。我尝试了2000行作为测试。一个简单的foreach循环将返回的数据转换为JSON数据。因此，它在循环遍历行时实际上构建了一个长数组的JSON变量。通过这种方式，您正在模拟本地数据库的快照。JS实际上可以非常快速地访问数组元素，您可能会惊讶于您可以多快地排序、修改、删除信息。

<script>
var appData = [{'id':'0','first':'Sam','last':'Smith'},{'id':'1','first':'Dan','last':'Smith'}];
</script>

这个JSON数据被包含在一个script标签内。JQuery在文档就绪时读取数据并根据需要将其添加到HTML文本中。当用户更改JSON数据的值时，ajax会触发并将更改保存到数据库中。将这样的系统添加到您的应用程序中并不太困难。我后来使用了Google的Angular.js来将数据绑定到UI上，以实现简洁的MV模式，并且还可以轻松进行快速的客户端排序和过滤。正如已经提到的，Backbone.js和其他JS框架可以将客户端数据与服务器同步。

2）我将数据保存到HTML页面的第二种方法是再次通过foreach循环遍历返回的行。然后，我使用老式的方式将数据保存在HTML中。

<input type="hidden" name="someName" value="someValue" />

然后我使用JQuery处理数据并将其添加到UI中。如果你真的想在JSON方面尝试些新鲜事，实际上你可以像这样将它嵌入到HTML变量中

<input type="hidden name="row1" value="{'color':'red','style':'fancy','age':'44'}" />

然后，您可以使用JQuery或Angular.js处理数据并将其绑定到您的UI。

有趣的是，许多应用程序框架没有内置的客户端缓存系统。在服务器端对选择菜单进行排序，然后重新构建HTML确实效率低下。最好在JS中对其进行排序并动态重建选择菜单。这里存在安全问题，您不希望将私人信息打印到JSON或HTML变量中，因为它在查看源代码时是可见的。此外，您可以使用更流氓的技术将数据嵌入页面。请考虑以下内容：

<span class="data" value="1234"></span>
$(function () { 
    $('.data').each( function() {
        var val = $(this).attr('value');
        console.log(val); //process data
    });
});

然后您可以使用JQuery在doc.ready上处理名为data的类。您还可以将JSON数据放入值中，并稍后解析它。请记住，JQuery的开发人员反对开发人员以这种方式使用类。根据我的经验，如果您不过度使用它，它会非常好用。

- mbokil