如何缓存自动完成建议数据反应答案

【问题标题】：How to cache autocomplete suggestions data react如何缓存自动完成建议数据反应
【发布时间】：2020-09-28 04:07:21
【问题描述】：

我在 MongoDB 中有一个通用医学数据库，其中包含大约 3500 个文档。我想在 React Web 应用的自动完成输入字段中使用药物名称和品牌名称。

数据可能如下所示：

{
"_id": {
    "$oid": "5ed9bf1087263e1ef3d65288"
},
"name": "Ethamsylate + Mefenamic acid",
"brands": [
    {
        "name": "STOP-MF",
        "package": "Tablet",
        "strength": " ",
        "price": "120.00"
    },
    {
        "name": "SYLATE-M 500",
        "package": "Tablet",
        "strength": " ",
        "price": "156.00"
    },

],
}

数据不会经常更改，因此我想在初始加载时将其缓存在客户端。我一直在谷歌上搜索这个。我发现的是：

为每个新输入的字符发出 HTTP 请求是错误的。
LocalStorage API 易于使用，但需要压缩数据
IndexedDb 提供无限存储，但 API 相当复杂

我在浏览器中没有找到太多关于其他存储选项的信息。感谢您的所有帮助！

试过 SWR，但每次我重新加载页面时它都会发出一个 HTTP 请求，因为请求需要 5-8 秒才能获取数据，所以我想以某种方式将数据本地存储在浏览器中

【问题讨论】：

标签： json reactjs autocomplete local-storage browser-cache

【解决方案1】：

你试过swr 吗？它可以帮助您在客户端缓存数据：D

【讨论】：

这不行，因为我正在获取不会改变的大数据，所以我想在第一页加载时获取它并将其存储在某个地方以备后用，我不想要在每次重新加载页面时运行 HTTP 请求。

【解决方案2】：

为每个新输入的字符发出 HTTP 请求是不好的。

这并不总是坏事，这取决于您的用例。你会说谷歌搜索执行得很糟糕，因为它会在你输入时发出请求吗？不完全的。您还可以使用节流阀和去抖动来在一定程度上限制请求数量。但是，如果您需要离线访问并且您的数据库相对较小，那么您当然还有其他选择。

IndexedDb 提供无限存储，但 API 相当复杂

您是否尝试过在它周围使用一些包装器？喜欢https://github.com/dfahlander/Dexie.js 可能适合你吗？

【讨论】：