如何使用 VueJS 将来自 API 的数据存储在 localStorage 中

Posted 2023-02-22

【中文标题】如何使用 VueJS 将来自 API 的数据存储在 localStorage 中

【英文标题】：How to store data from an API in localStorage with VueJS

【发布时间】：2019-03-05 21:49:31

【问题描述】：

我用 VueJS 练习简单的 SPA 需要我听一个 API 并将它的一些数据保存在浏览器的 localStorage 中，但是我对 VueJS 的经验还不是很丰富，所以我不知道如何采取具体的数据并将其保存到 LS，以便登录的用户稍后可以查看他们的信息。

API 检索了很多信息，现在我只想获取用户的电子邮件和姓名。

这是目前为止的代码：

<script>
    import axios from 'axios';
  import jsonpAdapter from 'axios-jsonp';

  export default 
    data() 
      return 
        info: 'placeH',
        data: []
      
    ,
    mounted: function()
      axios(
        url: 'APIplaceholder'
        adapter: jsonpAdapter
      ).then((res) => 

      );
    
  
</script>

我现在的问题是我不知道如何只选择我想要的特定信息（API返回很多信息，但我只需要电子邮件和姓名）然后将其保存到localStorage。

我认为最好也将其保存到 LS 中的 JSON 文件中。

【问题讨论】：

然后将其存储在本地存储中。我建议你使用 async/await。

【参考方案1】：

localStorage 只保留字符串。这意味着localStorage.setItem("apiData", res.data) 会将字符串"[Object object]" 存储在localStorage 中，而不是res.data 对象。

您必须使用JSON.stringify() 和JSON.parse() 来设置和从localStorage 获取项目。

.then((res) => 
     localStorage.setItem("apiData", JSON.stringify(res.data));
);

你可以得到它们，

var data = JSON.parse(localStorage.getItem("apiData"));

然后您可以使用（点）运算符访问数据，例如data.userName。

希望对你有帮助。

【讨论】：

看看我是否理解正确：第一个参数“apiData”是要存储的内容，第二个 res.data 是从 API 获取的实际数据？意思是，res.data 会抓取说“[e-mail]”，然后它会被传递并保存到“apiData”？如果是这样，是否需要将其 .stringify 为 json？

是的，你是对的。 localStorage 只保留字符串。我更新了我的答案。

【参考方案2】：

您将获得一个response 对象，该对象具有代表请求的user 的data 属性，如下所示：

mounted: function()
  axios(
    url: 'APIplaceholder'
    adapter: jsonpAdapter
  ).then((res) =>      
        localStorage["name"]=res.data.name
        localStorage["email"]=res.data.email
  );