本地存储自动完成/提前键入字段的数据

Storing data locally for an autocomplete/typeahead field

本文关键字：字段 数据 存储      更新时间：2023-09-26

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

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

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

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

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

  • 它应该通过Ajax以JSON的形式发送（至少在最初是这样）吗？这会给我带来同样的缓存好处吗（除了更大的灵活性）？

  • 本地存储怎么样？建议这样做吗？它在IE8中有效吗？如果是这样的话，我该如何利用它呢？如果必须的话，我能使它无效吗？

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

如有任何帮助或建议，不胜感激。

虽然我不喜欢在客户端存储大约2600个对象，但（我更喜欢通过ajax调用在服务器端过滤结果，而且你已经在运行rails了。如果处理得当，用户可以立即响应）。

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

有这么多选项，这就是为什么不同的用法也不同。

我的选择是使用js中的firstmeans静态变量。

CCD_ 2。我所做的有所不同，最初我们加载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/

相关文章：