Question

我在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秒钟来提取数据，我想以某种方式将数据存储在浏览器中

Answer 1

您尝试过swr吗？它可以帮助您在客户端：D

缓存数据

Answer 2

对每个新键入的字符进行HTTP请求是不好的。

这并不总是很糟糕，这取决于您的用例。您会说Google搜索实施不佳是因为它在您键入时会发出请求吗？不完全的。您也可以使用油门和反跳来限制请求数量。但是，如果您需要脱机访问并且您的数据库相对较小，那么您当然还有其他选择。

IndexedDb提供了无限的存储空间，但是API相当复杂

您是否尝试过使用一些包装纸？也许https://github.com/dfahlander/Dexie.js会适合您？

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

2 个答案: