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

Question

根据 var 项是否为真（单击按钮后），浏览器刷新后按钮文本“已完成”应保持不变。我不确定问题是什么，但我也尝试过 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')

代码其他部分的一些 cmets：

• 如果item2 只能是布尔值，则this.item2 === true 可以缩短为this.item2。

1234563

• 我不确定你想用对象顶层的 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，因为如果它不存在（或故意设置为true 以外的其他值），它将解析为false localStorage.

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

更新#2：

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

例如

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