为自动完成/预先输入字段在本地存储数据

Posted 2023-02-22

【中文标题】为自动完成/预先输入字段在本地存储数据

【英文标题】：Storing data locally for an autocomplete/typeahead field

【发布时间】：2015-05-22 02:47:02

【问题描述】：

我正在构建一个带有自动完成/预先输入输入字段的网络应用程序（在客户端的 React 中并由 Rails 服务器 API 支持）。我想在本地（在客户端）存储该字段的数据，因为：

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

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

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

它是否应该存在于自己的静态 js 文件中，分配给一个变量，该变量随页面一起加载并（希望）在后续访问时缓存？

是否应该通过 Ajax 将其作为 JSON 发送（至少最初是这样） - 这会给我带来相同的缓存优势（除了更多的灵活性）吗？

本地存储怎么样？推荐吗？它在IE8中工作吗？如果是这样，在这种情况下我将如何使用它？如果必须，我可以使其无效吗？

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

任何帮助或建议表示赞赏，谢谢。

【问题讨论】：

我个人不会觉得在客户端存储这么多信息会占用内存，我也做过类似的事情，但我设置了一个 AJAX 调用来获取每个 keypup 事件的预输入结果。我发现这对我来说非常敏感，并且允许可扩展性。我有兴趣看看你得到什么答案。好问题。

@jennas，我看不出它有什么不舒服的理由。我见过几个使用本地存储来存储/读取整个站点数据对象（+ CDN 提供的资产）的网站，这使得这些网站在全球范围内的速度明显加快。至于 IE8——我真的不会太在意。为什么你会支持一个很快甚至连 MS 都不支持的浏览器？

@ArturFilipiak 是的，哇，这很有趣... :) 你知道在移动设备上存储这么多数据的表现如何吗？

本地存储可以在任何现代设备上处理相当大的 JSON 数组。 stevesouders.com/blog/2014/02/11/…

【参考方案1】：

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

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

【讨论】：

如果您确实采用了 ajax 方法，请确保为那些输入速度非常快的用户取消所有先前未决的 typeahead ajax 请求。

【参考方案2】：

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

我的选择是在 js 中使用 first 表示静态变量。

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/