Question

我正在使用autocomplete / typeahead输入字段构建一个Web应用程序（在客户端的React中，由Rails服务器API支持）。我想在本地（在客户端）存储此字段的数据，因为：

当用户输入即时时我想要响应。这很重要，因为它本质上是一个数据输入应用程序，此过程重复多次。这也意味着数据将一次又一次地重复使用。
数据是静态的，不会发生变化（新的数据集出来时可能每1 - 2年除外一次）。

数据由~2600个对象组成，每个对象都有一些关联数据。总的来说，生成的JSON数组目前的大小约为420 KB。

我的问题是：在客户端以合理持久的方式存储这些数据的最佳策略是什么？

它是否应该存放在自己的静态js文件中，该文件已分配给变量，该文件会加载页面并（希望）在后续访问中缓存？
它是否应该通过Ajax作为JSON发送（至少最初） - 这会给我相同的缓存优势（除了更多的灵活性）？
本地存储怎么样？是推荐吗？它在IE8中有效吗？如果是这样的话，我将如何利用它呢？如果必须，我可以将其无效吗？

就像我说的那样，客户端是用React构建的，但如果相关的话，我也会使用jQuery。

感谢任何帮助或建议，谢谢。

Answer 1

虽然在客户端存储约2600个对象不是我的首选，（我更喜欢通过ajax调用在服务器端过滤结果，并且您已经运行了rails。如果处理得当，响应是即时的。）< / p>

因此，如果您真的想要客户端保存数据，请创建一个Store（如果您正在使用flux）或只是一个全局变量来保存常量。包括过滤/自动完成的常量。
通过Ajax获取初始数据：如果在索引端点的rails服务器上缓存响应，则可以获得更大的灵活性（添加/编辑数据等）。然而问题是我们失去带宽，因为组件必须每次渲染时都触发ajax。如果想要将使用扩展到移动应用程序，这将成为一个瓶颈。
在这种情况下通过本地存储执行此操作与全局变量具有相同的效果。

Answer 2

There is so many option这就是为什么虽然也与使用不同。

我的选择是在js中使用第一个静态变量。

By default jquery typeahead/ autocomplete is work on local data。我所做的是有所不同，最初我们加载1000的数据，但后来的要求是在每个字符输入时从服务器获取数据。

现在提出问题的效果点。当您的数据是静态的时，您可以使用任何客户端存储，如js，localstorage或jstorage等。

1. In your data is not much so you can load the data via js. Just check first that how much time taken to load js via `firebug in firefox browser`.

2. Your second option is same impact, only differ is you have to code to get data on client side. Means overall you have to store in js variable as in first option.

3. Yes, local storage is work on IE8.

为了利弊，请查看链接。

https://softwareengineering.stackexchange.com/questions/138561/pros-cons-between-emphasizing-client-side-or-server-side-processing

http://voidcanvas.com/client-side-data-storage/

在本地存储自动完成/先行字段的数据

2 个答案: