Javascript 在本地存储自动完成/typeahead字段的数据

我正在构建一个web应用程序（在客户端的React中，由Rails服务器API支持），其中包含一个自动完成/提前键入输入字段。我想在本地（客户端）存储此字段的数据，因为：

我希望用户键入时的响应是即时的。这一点很重要，因为它本质上是一个数据输入应用程序，该过程会重复多次。这也意味着数据将被一次又一次地重用

数据是静态的，它不会改变（除非可能每1-2年出现一个新的数据集）

数据由约2600个对象组成，每个对象都有少量相关数据。目前生成的JSON数组的大小总计约为420 KB

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

• 它是否应该存在于自己的静态

  js

  文件中，分配给一个变量，该变量随页面加载，并（希望）在后续访问中缓存

• 它是否应该通过Ajax以JSON的形式发送（至少最初是这样）——这会给我同样的缓存好处吗（除了更灵活一点）

• 本地存储呢？建议使用吗？它在IE8中工作吗？在这种情况下，我将如何使用它？如果必须的话，我可以宣布它无效吗

正如我所说，客户端是内置的React，但如果相关的话，我也使用jQuery

---

非常感谢您的帮助或建议。

尽管我不喜欢在客户端存储2600个对象（我更喜欢通过ajax调用在服务器端过滤结果，而且您已经在运行rails了。如果处理得当，用户会立即得到响应）

因此，如果您确实希望客户端保存数据，请创建一个存储（如果您使用的是flux）或仅创建一个全局变量来保存常量。包括过滤/自动完成的常数

通过Ajax获取初始数据：如果您将响应缓存在索引端点的rails服务器上，那么您将获得更大的灵活性（添加/编辑数据等）。然而，问题是我们丢失了带宽，因为组件必须在每次渲染时启动ajax。如果想要将使用范围扩展到移动应用程序，这将成为更大的瓶颈

在这种情况下，通过本地存储执行此操作与全局变量具有相同的效果 这就是为什么虽然也有不同的用法

我的选择是使用js中的first means静态变量

默认情况下，jquery typeahead/autocomplete用于本地数据

。我所做的是不同的，最初我们加载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.

有关正反两方面的信息，请查看链接

---

我个人觉得在客户端存储这么多信息会消耗内存并不舒服，我也做过类似的事情，但我设置了一个AJAX调用，为每个keypup事件获取提前打印结果。我发现这对我来说是非常灵敏的，并且允许可伸缩性。我很想看看你得到了什么答案。问得好。@jennas，我看不出有什么理由不舒服。我见过几个网站使用本地存储来存储/读取整个网站的数据对象（+CDN提供的资产），这使得这些网站在全球范围内速度明显加快。至于IE8，我真的不会太麻烦。为什么你会支持一个很快就连微软都不支持的浏览器？@ArturFilipiak耶哇，这很有趣…：）你知道在移动设备上存储这么多数据的性能吗？本地存储在任何现代设备上都可以处理相当大的JSON数组。如果您确实使用ajax方法，请确保为那些快速键入的用户取消所有以前挂起的typeahead ajax请求。