获取后在本地存储中保存 JSON

Question

对不起，如果这个帖子太多了，我看了好几篇文章，但找不到解决办法。所以，我正在从这个 API 中获取一个大的 JSON，我想以某种方式在 localStorage 中缓存响应，所以下次加载页面时，脚本首先检查如果 JSON 中有一个具有请求 ID 的对象，如果有则呈现内容 - 如果没有，则转到 API 获取它。

我正在考虑设置两个 fetch() 函数，这就是我所拥有的：

   fetch(url + id)
        .then((response) => {
            localStorage.setItem('myResponse', response);
        })              
        .catch((error) => {
            console.log(error);
        })

然后，检查localStorage里面有没有保存的东西，如果好的，用它来渲染HTML，如果没有，继续另一个fetch从API.

  if(localStorage) {
     createHTML(localStorage.myResponse);
  } else {
     fetch(url + id)
         .then(response => response.json())
         .then(data => createHTML(data))
  }

但是，在第一次获取时，如果我使用 JSON.stringify(response)，它只是将其显示为一个空对象，因此 localStorage 看起来像：myResponse - {}。如果我在第一次获取时执行 console.log(response.json());，它会显示 Promise {<pending>}.

我试图从中得到一些东西，但没有结果......非常感谢任何帮助！

Answer 1

response.json() 是一个 Promise，它需要被 awaited，或者链接成 .then()；如果您只是按原样记录它，您将得到的只是 Promise {<pending>} 因为它还没有解析。

fetch(url + id)
        .then( response => response.json() )
        .then( json => {
            localStorage.setItem('myResponse', JSON.stringify(json));
        })

或使用 async/await 语法：

const response = await fetch(url + id);
const json = await response.json();
localStorage.setItem('myResponse', JSON.stringify(json));

获取后在本地存储中保存 JSON

Save JSON in Local Storage after the fetch

javascript

json

caching

fetch

local-storage