Question

我使用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。 / p>

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

Answer 1

localStorage仅保留字符串。 localStorage.setItem("apiData", res.data) 将[Object object]存储在本地存储中。您必须使用JSON.stringify和JSON.parse来设置和从本地存储中获取项目。

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

您可以通过

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

然后您可以使用（点）运算符访问数据。示例data.userName。希望能帮助到你。

Answer 2

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

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

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

2 个答案: