Issue with Local Storage: Value not being saved, instead [object MouseEvent] being stored

Question

Issue with Local Storage: Value not being saved, instead [object MouseEvent] being stored

I am truly grateful for the help from @zim as it allowed me to drastically simplify my code for 2 buttons that store true/false values locally. However, I am facing an issue where the button click is registering as [object MouseEvent] instead of True/False. Despite my best efforts, I have reviewed this thoroughly but am unable to determine why the correct value is not being stored.

Markup

<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>

Script:

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,
    }
}
},

javascript vue.js tailwind-css vue-composition-api

Answer 1

Answer №1

Clarification on @Barmar's answer:

The reason why you're seeing [object MouseEvent] in Local Storage is because your click-handlers are storing the event data (the value being the MouseEvent object from the click event) instead of the Boolean value changed inside the handler. Since Local Storage can only store strings, it converts the MouseEvent object into a string, resulting in [object MouseEvent], as demonstrated below:

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

The solution is straightforward - store the intended Boolean value:

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) // ✅
    }
  }
}

When retrieving data from Local Storage, make sure to convert the stored string back into a Boolean:

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

I see that you have been doing this in the setup() function but assigning the result to temporary variables. To correctly declare props in setup(), replace the data() props with 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

Clarification on @Barmar's answer:

The reason why you're seeing [object MouseEvent] in Local Storage is because your click-handlers are storing the event data (the value being the MouseEvent object from the click event) instead of the Boolean value changed inside the handler. Since Local Storage can only store strings, it converts the MouseEvent object into a string, resulting in [object MouseEvent], as demonstrated below:

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

The solution is straightforward - store the intended Boolean value:

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) // ✅
    }
  }
}

When retrieving data from Local Storage, make sure to convert the stored string back into a Boolean:

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

I see that you have been doing this in the setup() function but assigning the result to temporary variables. To correctly declare props in setup(), replace the data() props with 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 3

Answer №2

value represents an Event object, which cannot be directly stored in localStorage since it only supports string values.

To store the value of this.privateChat and this.allSounds, you should convert them to JSON before saving and parse them when accessing.

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,
      }
    },
  },

Answer 4

value represents an Event object, which cannot be directly stored in localStorage since it only supports string values.

To store the value of this.privateChat and this.allSounds, you should convert them to JSON before saving and parse them when accessing.

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,
      }
    },
  },

Issue with Local Storage: Value not being saved, instead [object MouseEvent] being stored

Answer №1

Answer №2

Similar questions

text box with an immobile header

Avoiding repetition in json array using reactjs with the help of axios

Is it possible to retrieve data from a database using jQuery and store it in separate variables?

mysql nodejs function is returning a null value

I'm attempting to utilize a basic webcam capture upload feature, but it seems that the upload function is not functioning properly

Is dynamic data supported by Next.js SSG?

Streamline a javascript code with numerous elements

Using a series of identical divs to dynamically update the image URL

Seeking guidance on designating an additional disk for fs.readdir(path) within an Electron-vue application?

Navigating through sections in NextJS-14: Utilizing useRef for seamless scrolling

When an element is appended, its image height may sometimes be mistakenly reported as

Transforming the typical click search into an instantaneous search experience with the power of Partial

Hide elements forever once the form is submitted

Avoid unnecessary re-renders in ReactJS Material UI tabs when pressing the "Enter

Adding turbolinks to an HTML document can be achieved without the need for a

retrieve the coordinates of the northwest and southeast corners of a group of markers displayed on a Google Map

Import existing data from a pre-filled form - VueJS - Bootstrap-Vue

When the down key is pressed in a textarea, choose the list item

Contrasting the uses of element(...) versus element(...).getWebElement() in Protractor

Utilize the material-ui dialog component to accentuate the background element