本地存储不存储值。仅存储 [object MouseEvent]

Question

感谢@zim，我能够为两个在本地存储真/假的按钮简化代码。但是，由于某种原因，按钮单击有效，但它存储的是 [object 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

澄清@Barmar's answer：

您在本地存储中看到 [object MouseEvent] 是因为您的 click 处理程序正在存储事件数据（value 是来自 click 事件的 MouseEvent 对象）而不是处理程序内部更改的布尔值.由于 Local Storage 只存储字符串，它会将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,
    }
  }
}

demo 1: Options API with Composition API

demo 2: Composition API only

Answer 2

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

您应该存储this.privateChat 和this.allSounds 的值。存储时需要转成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,
      }
    },
  },