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

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。

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

标签： javascriptvue.jsvuejs2axiosvue-component

Answer 1

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

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

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

你可以得到它们，

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

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

希望能帮助到你。