如何将数据持久化（转储）到本地存储并在以后的会话中加载？

Posted 2023-03-08

【中文标题】如何将数据持久化（转储）到本地存储并在以后的会话中加载？

【英文标题】：How to persist (dump) data to local storage and load it at later sessions?

【发布时间】：2016-11-13 23:24:15

【问题描述】：

我想保留 Relay 存储中的部分数据，并在以后的会话中再次加载，以获得更好的用户体验。 （我使用 Relay 和 react native 作为上下文）。

数据可以相对较大（最多几千条记录），并且不需要与服务器 100% 同步。 我想跨会话保留记录，因为我不想每次用户打开应用程序时都重新获取数据。这将是服务器的负担和糟糕的用户体验（加载时间）。

【参考方案1】：

您可以在设置 Relay 时创建的环境文件中访问 Relay 的完整存储。如果您尝试从控制台注销recordSource，您应该会看到您的整个存储，并且每次 Relay 处理新操作（查询/突变/订阅）时它都会更新，因此您可能需要做的就是将其存储在持久存储中（即本地存储）。

例子：

// your-app-name/src/RelayEnvironment.js
import Environment, Network, RecordSource, Store from 'relay-runtime';
import fetchGraphQL from './fetchGraphQL';

async function fetchRelay(params, variables) 
  console.log(`fetching query $params.name with $JSON.stringify(variables)`);
  return fetchGraphQL(params.text, variables);


const recordSource = new RecordSource();
console.log(recordSource);
// Store `recordSource` in persisted storage (i.e. localStorage) here.
if(typeof window !== "undefined")  // optional if you're not doing s-s-r
  window.localStorage.setItem("relayStore", JSON.stringify(recordSource));


export default new Environment(
  network: Network.create(fetchRelay),
  store: new Store(recordSource),
);

【讨论】：

嗯，这将始终保持一个空的 ._records 对象，因为它是在任何操作填充 recordSource 之前完成的。另外，鉴于我们解决了第一个问题，您在什么时候恢复数据？

我建议 window.localStorage.setItem("relayStoreRecords", JSON.stringify(Object.fromEntries(recordSource._records)));在 fetchRelay 和 recordSource._records = new Map(Object.entries(JSON.parse(localStorageRelayStoreRecords)));外面的某个地方。

这里只是一点建议 - localStorage 在容量方面似乎有点不足。它只有 5 mb 的容量，当你达到上限时会破坏一切。