Question

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

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

this.item2 === true

this.item2可以缩写为item2。
如果localStorage是false，那么您目前仅使用setItem中的值，因为您只会用{ {1}}
我不确定您要使用对象顶部的true道具做什么
强烈考虑使用camelCase作为您的方法名称。遵循全球惯例

更新：

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

item

我已将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之前，也无需检查true是否为clickedOrderButton，因为如果false不存在（或故意设置为{ true中localStorage以外的内容。

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

UPDATE＃2：

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

例如

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

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

1 个答案: