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

Posted 2023-03-07

【中文标题】本地存储不存储值。仅存储 [object MouseEvent]

【英文标题】：Local Storage not storing value. Only storing [object MouseEvent]

【发布时间】：2021-09-07 09:27:49

【问题描述】：

感谢@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,
    
  ,
  ,

【参考方案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

【参考方案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,
      
    ,
  ,

【讨论】：

其实这不是真的。我在“黑暗模式”下工作，它可以切换一个 div。我没有为此使用 JSON，它将数据很好地存储在本地存储中。我接受您的答案可能有效（未经个人测试），但这只会给一个简单的问题增加一些不必要的复杂性......

您可以存储字符串"true" 或"false"，但这就是JSON.stringify() 的作用。

这就是我需要做的 - 将 allSounds 和 privateChat 的 true/false 存储在本地存储中，然后在需要时调用它们

使用JSON.stringify比写localStorage.set("privateChat", this.privateChat ? "true" : "false")更简单