从 htm5 localstorage 加载获取和过滤的 json

Question

我尝试从https://api.github.com/users/moonhighway 获取 json 并将其替换并存储在浏览器中，然后从本地存储中加载新数据但它不起作用。我 100% 受到这个项目的启发：https://codesandbox.io/s/ancient-surf-730m1?file=/src/App.js 以下是我的代码：

const { useEffect, useState } = React;
const loadjson = (key) => JSON.parse(window.localStorage.getItem(key));
const savejson = (key, data) => {
  window.localStorage.setItem(JSON.stringify(key), JSON.stringify(data));
};
const App = ({ login }) => {
  const [data, setData] = useState(loadjson(`user:${login}`));

   useEffect(() => {
     if(!data) return;
     if (!`user:${login}`) return;
     if(data.login===login) return;
    const { name, avatar_url, location } = data;
    savejson(`user:${login}`, { name, avatar_url, location, login });
  },[data]);
  useEffect(() => {
    if (!login) return;
    if(data&&data.login===login) return;
    fetch(`https://api.github.com/users/${login}`)
      .then((response) => response.json())
      .then(setData)
      .catch(console.error);
  },[login]);
 

  return <pre>{JSON.stringify(data, null, 2)}</pre>;

};

ReactDOM.render(, document.body);

我的项目链接：https://codepen.io/nutkin/pen/QWKoabm?editors=1111,but 它不起作用。预期的输出如下所示：

{ "name": "月球公路", “登录”：“月球公路”， "avatar_url": "https://avatars0.githubusercontent.com/u/5952087?v=4", “位置”：“加利福尼亚州塔霍市” }

Answer 1

那是因为你的 save_key 和 load_key 不一样。

请将您的 savejson 更改如下：

const savejson = (key, data) => {
  window.localStorage.setItem(key, JSON.stringify(data));
};