为什么页面刷新后本地存储不持久

Question

根据 var item 是否为真（单击按钮后），浏览器刷新后按钮文本“已完成”应保持不变。 我不确定问题是什么，但我也尝试过 Chrome，所以我认为它与浏览器无关。

<template>
<button type="button" v-bind:class="order_button_style" @click="on_order_button_click()">
  {{ buttonText }}
</button>
</div>
</template>

<script>
export default {


item: '',
data() {

  return {
  item2: this.item
  }
},
methods: {
on_order_button_click() {
 this.item2 = true;
  localStorage.setItem(this.item2);
}

},
mounted() {
const storedState = localStorage.getItem(this.item2) === 'false';
if (storedState) {
  this.item2 = storedState;
}
},
computed: {
buttonText() {
  return this.item2 === true ? "Completed" : "Complete";
},
order_button_style() {
  return this.item2 === true
    ? "btn btn-danger"
    : "btn btn-primary";
}

}

};
</script>

Answer 1

localStorage.setItem需要 2 个参数， name和value 。

我相信你的意思是写以下内容：

在localStorage中设置项目

localStorage.setItem('item', this.item2)

并检索它

localStorage.getItem('item')

对代码其他部分的一些评论：

• 如果item2不能是this.item2以外的任何东西，则this.item2 === true可以缩短为 this.item2。

• 您目前仅使用localStorage中的值，如果它是false ，它永远不会是因为您只调用setItem的值为true

• 我不确定您要对 object 顶层的item道具做什么

• 强烈考虑使用 camelCase 作为您的方法名称。 遵循全球惯例

更新：

我认为这就是您要实现的目标：

on_order_button_click() { // Should probably rename this to `onOrderButtonClick`, the current method name hurts to look at
  this.clickedOrderButton = true;
  localStorage.setItem('clickedOrderButton', this.clickedOrderButton);
}


created() {
  this.clickedOrderButton = localStorage.getItem('clickedOrderButton') === "true";
}

我已将item2重命名为clickedOrderButton 。 我不知道您为什么要根据显示的代码命名该变量item2 。

在将clickedOrderButton clickedOrderButton也无需检查它是否为true ，因为如果它在localStorage中不存在（或故意设置为true以外的其他值），它将解析为false 。

最后，我用created替换了mounted 。 由于您没有访问任何 DOM 元素，因此无需等到组件安装后才能运行该代码

更新#2：

如果您有此组件的多个实例，则需要设置使用与clickedOrderButton不同的名称。 您可以为每个按钮使用唯一标识符，您可以从上方将其作为道具传递。

例如

props: {
  id: { type: String, required: true }
}
...
localStorage.setItem(`clickedOrderButton-${this.id}`, this.clickedOrderButton);
...
localStorage.getItem(`clickedOrderButton-${this.id}`);