Question

我想在页面重新加载时检查localStorage，如果已经有一个项目，如果是，我想更新＆＃34; cryptocurreny＆＃34;使用当前值（标题和值）。

当我使用addCrypto()函数添加内容时，我的localStorage如下所示：

[{＆＃34;名称＆＃34;：＆＃34; ETH＆＃34;＆＃34;值＆＃34;：＆＃34; 1.5＆＃34;}，{＆＃34;名称＆＃ 34;：＆＃34; BTC＆＃34;＆＃34;值＆＃34;：＆＃34; 2.75＆＃34;}]

这是我的组成部分：

<template>
  <div>

    <div v-for="coin in cryptocurrency">
      <input v-model="coin.name">
      <input v-model="coin.value">
    </div>
    <button @click="addCrypto">
      New Cryptocurreny
    </button>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      cryptocurrency: [],
    }
  },
  methods: {
    set_data() {
      localStorage.setItem( 'cryptocurrencies', JSON.stringify(this.cryptocurrency) );
      this.cryptocurrency = this.get_data();
    },
    get_data(){
      return localStorage.getItem('cryptocurrencies');
    },
    addCrypto() {
      localStorage.setItem( 'cryptocurrencies', JSON.stringify(this.cryptocurrency) );
      this.cryptocurrency.push({ name: '', value: ''});
    }
  }
}
</script>

但我尝试在localStorage.getItem('cryptocurrencies');函数的末尾添加addCrypto()但我收到错误，并且在页面重新加载时，cryptocurreny变量为空。

Answer 1

我无法确定您正在做的事情，但从我看到的set_data()函数不会被调用到任何地方？

您想要使用已安装或创建的挂钩（see which one suits you）并在那里进行检查。

示例

mounted () { const saved = localStorage.getItem('cryptocurrencies') if (saved) { this.cryptocurrency = saved } }

您可以将该代码放入其自己的方法中，然后在mounted()中调用它。

Vue.js - 刷新时使用当前localStorage更新数组

1 个答案: