如何在本地存储中存储一个数组？

Question

我有一个数据属性

 data() {
    return {
        playWord: [],
        baseWord: "",
        result: [],

    }
},

并响应

   baseWord:"Amazing"

我每次在 api 中发送新请求时都会更改基词。我想将每个数据存储在本地存储中并将字符串值发送到 axios post 方法。

我的post方法在这里，

 methods: {
    name() {
        var name = localStorage.getItem("userName");
        console.log(name);
    },

    async playInfo() {
        this.$axios.post('user_play_info ', {
                words: "test",
                score: "5",
                user_name: localStorage.getItem('userName'),

            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    }
},

我一直在努力localstorage.setitem

 const testObject = this.baseWord
    console.log(testObject);

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

    var retrievedObject = localStorage.getItem('testObject');

    console.log(retrievedObject);

如何将数据存储在数组中？并通过 api 响应发送 sting 值。

Answer 1

这是一个完整的示例，说明如何使用 API + 在 Nuxt

中正确使用 localStorage

<template>
  <div>
    <button @click="cleanPlaylist">Clean the playlist</button>

    <p>Items</p>
    <ul v-for="user in users" :key="user.id">
      <li>
        <span>{{ user.name }}</span> ~
        <span>{{ user.email }}</span>
        <button @click="saveToLocalStorage(user)">Save this user</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    }
  },
  async fetch() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    const json = await response.json()
    console.log('json', json)
    this.users = json
  },
  methods: {
    saveToLocalStorage(user) {
      if (localStorage.getItem('playlist')?.length) {
        const currentUsers = JSON.parse(localStorage.getItem('playlist'))
        console.log('current users', currentUsers)
        const newData = [...currentUsers, user]
        localStorage.setItem('playlist', JSON.stringify(newData))
      } else {
        localStorage.setItem('playlist', JSON.stringify([user]))
      }
    },
    cleanPlaylist() {
      localStorage.removeItem('playlist')
    },
  },
}
</script>

一个codesandbox可以是found here。

您应该有大量的示例代码 + 有一些 console.log 可以理解正在发生的事情。当然，推荐使用浏览器开发工具（Application 选项卡）。

如何在本地存储中存储一个数组？

How to store an array in localStorage?

javascript

vue.js

nuxt.js