Reactjs中本地存储超出配额错误如何解决

Question

关于React.js/Typescript中的redux-localstorage-simple，在尝试存储大量数据（实际上是与tilemap坐标数据相关的对象数组）时发生exceeded the quota错误。 我确定是因为某个主机的本地存储超出限制。

重新加载页面会初始化redux存储，所以我不得不使用redux-localstorage-simple库来避免数据丢失。

在这种情况下，我应该使用哪种替代方法来避免超出配额错误？

Answer 1

取决于您的应用程序。

首先，您是否检查了 JSON 有效负载中的文件大小？ 尤其是在 tilemap 的上下文中，您可能会拥有包含大量细节的巨大多边形形状，这些细节很快就会超过兆字节的数据。

请检查您的本地存储库可能在后台使用的 JSON.stringify 输出的大小。

如果存储实际上是一个限制，您可以升级到 IndexedDB（具有更高的配额）或尝试仅存储相关键并在重新存储存储时重新创建缺失的属性。

我在存储大块数据时遇到了类似的问题，最终使用了提供 IndexedDB 适配器的redux-offline。