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 here的信息。

有关本地存储的信息，请访问here

Answer 2

您需要将数据作为字符串存储在localStorage中

因此请使用JSON.stringify（）;

let showUsers = (users) => {
  users.forEach(user => {       

    localStorage.setItem('user', JSON.stringify(user));  

  });
};

Answer 3

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

window.localStorage.setItem('allusers', JSON.stringify(listOfUsers));

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

3 个答案: