本地存储不存储值。只存储[对象MouseEvent]

Question

多亏了@zim，我才能够为本地存储true/false的两个按钮大量简化代码。但是，由于某种原因，单击按钮可以工作，但它存储的是对象MouseEvent，而不是True / False。我已经多次检查这个问题了，但是我不明白为什么它没有存储正确的值。

标记

          <div>
              <button type="button" @click="clickPrivateChat">
                  <a key="privateChat" href="#" :class="privateChat?'bg-green-900 hover:bg-green-700':''" class="bg-red-900 text-gray-100 hover:bg-red-700 hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium">
                      <ChatIcon class="h-6 w-6 text-white"/>
                      <span class="pt-2">Private Chat {{ privateChatOnOrOff }}</span>
                  </a>
              </button>
          </div>

          <div>
              <button type="button" @click="clickAllSounds">
                  <a key="privateChat" href="#" :class="allSounds?'bg-green-900 hover:bg-green-700':''" class="bg-red-900 text-gray-100 hover:bg-red-700 hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium">
                      <VolumeUpIcon class="h-6 w-6 text-white"/>
                      <span class="pt-2">All Sounds {{ allSoundsOnOrOff }}</span>
                  </a>
              </button>
          </div>

剧本：

  data() {
        return {
           privateChat: (localStorage.getItem("privateChat") === true) ? true : false,
           allSounds: (localStorage.getItem("allSounds") === true) ? true : false,        }
    },
  computed: {
    privateChatOnOrOff() {
        return this.privateChat  ? 'ON' : 'OFF'
    },
    allSoundsOnOrOff() {
        return this.allSounds ? 'ON' : 'OFF'
    }
  },
methods: {
    clickPrivateChat (value) {
      this.privateChat = !this.privateChat
      localStorage.setItem("privateChat", value)
    },
    clickAllSounds (value) {
      this.allSounds = !this.allSounds
      localStorage.setItem("allSounds", value)
    }
setup() {
    const mobileMenuOpen = ref(false)
    const privateChatEnabled = ref(privateChat)
    let privateChatValue = localStorage.getItem("privateChat")
    let privateChat = (privateChatValue === 'true')
    const allSoundsEnabled = ref(allSounds)
    let allSoundsValue = localStorage.getItem("allSounds")
    let allSounds = (allSoundsValue === 'true')
  
    return {
      sidebarNavigation,
      userNavigation,
      mobileMenuOpen,
      tabs,
      userlists,
      team,
      activityItems,
      privateChatEnabled,
      allSoundsEnabled,
    }
  },
  },

Answer 1

对https://stackoverflow.com/a/68106546/6277151的澄清

您在本地存储中看到了[object MouseEvent]，因为您的click-handlers正在存储事件数据(value是来自click事件的MouseEvent对象)，而不是在处理程序中更改的布尔值。由于本地存储仅存储字符串，因此它将MouseEvent对象转换为字符串，即[object MouseEvent]，如本演示所示：

​

console.log(new MouseEvent({}).toString())

​

修复方法是简单地存储预期的布尔值：

export default {
  methods: {
    clickPrivateChat (value) {
      this.privateChat = !this.privateChat 
      // localStorage.setItem("privateChat", value) ❌ value is a MouseEvent object

      localStorage.setItem("privateChat", this.privateChat) // ✅
    },
    clickAllSounds (value) {
      this.allSounds = !this.allSounds
      // localStorage.setItem("allSounds", value) ❌ value is a MouseEvent object

      localStorage.setItem("allSounds", this.allSounds) // ✅
    }
  }
}

从本地存储读取时，请确保将字符串转换回布尔值：

export default {
  data() {
    return {
      // BEFORE:
      // privateChat: (localStorage.getItem("privateChat") === true) ? true : false,
      // allSounds: (localStorage.getItem("allSounds") === true) ? true : false,

      // AFTER:
      privateChat: localStorage.getItem("privateChat") === "true",
      allSounds: localStorage.getItem("allSounds") === "true",
    }
  }
}

我注意到您在setup()中这样做，但是将结果分配给丢弃变量。要在setup()中正确声明道具，请将data()道具替换为refs：

import { ref }  from 'vue'

export default {
  // BEFORE:
  // data() {
  //  return {
  //    privateChat: localStorage.getItem("privateChat") === "true",
  //    allSounds: (localStorage.getItem("allSounds") === "true",
  //  }
  //},

  // AFTER:
  setup() {
    const privateChat = ref(localStorage.getItem("privateChat") === "true")
    const allSounds = ref(localStorage.getItem("allSounds") === "true")

    return {
      privateChat,
      allSounds,
    }
  }
}

演示1:带有组合API的Options API

演示2:仅限组合API

Answer 2

value是一个Event对象，不能将其存储在localStorage中。localStorage只能存储字符串。

您应该存储this.privateChat和this.allSounds的值。存储时需要转换为JSON，读取时需要解析JSON。

​

data() {
    return {
      privateChat: (JSON.parse(localStorage.getItem("privateChat") || "false") === true) ? true : false,
      allSounds: (JSON.parse(localStorage.getItem("allSounds"), "false") === true) ? true : false,
    }
  },
  computed: {
    privateChatOnOrOff() {
      return this.privateChat ? 'ON' : 'OFF'
    },
    allSoundsOnOrOff() {
      return this.allSounds ? 'ON' : 'OFF'
    }
  },
  methods: {
    clickPrivateChat(value) {
      this.privateChat = !this.privateChat
      localStorage.setItem("privateChat", JSON.stringify(this.privateChat))
    },
    clickAllSounds(value) {
      this.allSounds = !this.allSounds
      localStorage.setItem("allSounds", JSON.stringify(this.allSounds))
    }
    setup() {
      const mobileMenuOpen = ref(false)
      const privateChatEnabled = ref(privateChat)
      let privateChatValue = localStorage.getItem("privateChat");
      let privateChat = (privateChatValue === 'true')
      const allSoundsEnabled = ref(allSounds)
      let allSoundsValue = localStorage.getItem("allSounds")
      let allSounds = (allSoundsValue === 'true')

      return {
        sidebarNavigation,
        userNavigation,
        mobileMenuOpen,
        tabs,
        userlists,
        team,
        activityItems,
        privateChatEnabled,
        allSoundsEnabled,
      }
    },
  },

​