提取后将 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));