如何将api数据保存到本地存储中？

Question

我正在从 API 获取数据，但无法将数据保存到 localStorage 中。

我已经尝试了几件事，但似乎找不到问题所在。

giveUsers();

function giveUsers() {

  for (let i = 0; i < 10; i++) {

  fetch('https://randomuser.me/api/')

    .then(function (response) {

      return response.json();

  })

  .then(function (data) {

    showUsers(data.results);

  })

  .catch(function (error) {

    console.log("error", error);

  });

  let showUsers = (users) => {

      users.forEach(user => {

        // console.log(user.registered.age);

        // console.log(user.location.city);

        let firstName = user.name.first;

        let id = user.id;

        console.log(firstName);

        localStorage.setItem('allUsers', firstName);  

     });

  };}

}

if(localStorage.getItem('allUsers')){

  console.log(localStorage.getItem('allUsers'));

}

我希望我的数据进入 localStorage。

Answer 1

如果我正确理解你的问题。您可以使用async和await来获取。当您获取数据时，这需要一点时间才能从服务器获得响应，因为每次您在本地存储中设置一些 null 值。您可以async/await&nbsp;在此处找到有关信息。以及关于本地存储访问这里

Answer 2

您需要将数据作为字符串存储在 localStorage 中所以使用 JSON.stringify();let showUsers = (users) => {&nbsp; users.forEach(user => {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; localStorage.setItem('user', JSON.stringify(user));&nbsp;&nbsp;&nbsp; });};

Answer 3

在您的代码中，您似乎正在为每个用户设置 localstorage，从而有效地覆盖由于相同的“键值”而添加的最后一个用户您应该将它们放在一个列表中并将您的数组存储为 JSON。记住使用“window.localstorage”：它应该看起来像这样window.localStorage.setItem('allusers',&nbsp;JSON.stringify(listOfUsers));