时间戳

首页 > 解决方案 > 处理 LocalStorage 中的数据

javascript - 处理 LocalStorage 中的数据

问题描述

如果我使用存储大量内容页面的表格（在我的情况下使用 react-tabele）。


当我第一次打开第一页并将该数据放入 localStorage 时，然后打开第二页并将该数据放入 localStorage，然后打开第三页并将数据存储在 localStorage 中。


 我应该如何处理它？


当我回到第二页时，我是否应该尝试从 localStorage() 获取数据而不发送对这些数据的请求？


只是从 localStorage 中取回来并渲染它？</p>

如果有人可以给我一个使用它的例子，比如我的例子。

我看到了 mdn 示例，但他们只是想显示，当您关闭选项卡时，您可以继承旧设置。

标签： javascriptlocal-storage

解决方案

如果我理解正确，这与在 localStorage 中缓存数据有关。将数据保存到 localStorage 时，可以一起保存时间戳。当您再次到达该页面时，您可以检查时间戳并决定是发送请求还是重用 localStorage 中的数据。

例如：

// when you save the data to localStorage
localStorage.setItem(KEY, JSON.stringify({
   data: YOUR_DATA,
   ts: Date.now()
}));
...
// when you read the data from localStorage
// here try/catch is used because JSON.parse will be error
// when the localStorage item is nothing or incorrect json string
try {
    const { data, ts } = JSON.parse(localStorage.getItem(KEY));
    
    if (Date.now() - +ts < SOME_SPECIFIC_TIMESTAMP) {
         // use data
    } else {
         // send api
    }
} catch (err) {
    // send api
}

但是，这取决于您将数据保存到 localStorage 的原因。

推荐阅读