Local storage - x-data showing old/wrong value after page refresh #1210

DarpanKulkarni · 2021-03-29T11:19:10Z

DarpanKulkarni
Mar 29, 2021

I am trying to toggle dark mode saving the value in local storage. But when I toggle the dark mode on and off and refresh the page, the value in the local storage shows 'false' (which is expected) but the x-data sets the wrong value which is 'true'.

<!-- https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js -->
<body 
  x-data="{darkMode: localStorage.getItem('dark')}"
  x-init="$watch('darkMode', val => localStorage.setItem('dark', val))"
  x-bind:class="{ 'dark': darkMode }"
>
  
  <p x-show="darkMode">Dark Mode: ON</p>
  <p x-show="!darkMode">Dark Mode: OFF</p>
  
  <button
    @click="darkMode = !darkMode"
  >Toggle Dark Mode</button>
  
</body>

Check this fiddle for demo: https://jsfiddle.net/darpan_kulkarni/kpr5de0a

Turn on the dark mode
Turn off the dark mode
Refresh the page, it will still show dark mode ON

What I am doing wrong?

Answered by SimoTod

Mar 29, 2021

localStorage saves and retrieves everything as strings. The string false is a truthy value so it works as expected.
You need to change your x-data to x-data="{darkMode: localStorage.getItem('dark') === 'true'}"

View full answer

SimoTod · 2021-03-29T12:44:21Z

SimoTod
Mar 29, 2021
Collaborator

localStorage saves and retrieves everything as strings. The string false is a truthy value so it works as expected.
You need to change your x-data to x-data="{darkMode: localStorage.getItem('dark') === 'true'}"

1 reply

DarpanKulkarni Mar 30, 2021
Author

Thank you!

ravindra135 · 2023-02-08T06:59:59Z

ravindra135
Feb 8, 2023

Thank You @SimoTod for mentioning the obvious problem;

However, this way I implemented dark mode with alpine.js

In my app.js file

const  systemTheme  =  window.matchMedia("(prefers-color-scheme: dark)").matches;
//systemTheme returns 'boolean' type Value;

let  darkTheme  =  localStorage.getItem('dark')
//darkTheme returns 'string' type value

if(darkTheme  ==  null) {
	darkTheme  =  systemTheme;
	/* 
	If user is opening site for very first time, 
	So, it will prefer going with System Settings.
	*/
} else {
	darkTheme  = (/true/).test(localStorage.getItem('dark'));
	/*
	As, SimoTod mentioned localStorage will return string type, so we need to
	convert it into boolean value
	*/
}

Alpine.store('darkMode') {
	dark: darkTheme,
	toggle() {
		this.dark = ! this.dark;
		if(this.dark) {
			document.documentElement.classList.add('dark')
			//This will add 'dark' class to HTML;
			localStorage.setItem('dark', true)
		} else {
			document.documentElement.classList.remove('dark')
			localStorage.setItem('dark', false)
		}
	}
}

Now, in Blade Template File;

<html  lang="en" x-data x-cloak :class="$store.darkMode.dark ? 'dark' : '' ">

Now you can able to maintain the state of dark mode. Cheers!!!

1 reply

ekwoka Feb 8, 2023

Could use JSON.parse

Or just === true

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Local storage - x-data showing old/wrong value after page refresh #1210

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Local storage - x-data showing old/wrong value after page refresh #1210

Uh oh!

DarpanKulkarni Mar 29, 2021

Replies: 2 comments · 2 replies

Uh oh!

Uh oh!

SimoTod Mar 29, 2021 Collaborator

Uh oh!

DarpanKulkarni Mar 30, 2021 Author

Uh oh!

ravindra135 Feb 8, 2023

Uh oh!

ekwoka Feb 8, 2023

DarpanKulkarni
Mar 29, 2021

Replies: 2 comments 2 replies

SimoTod
Mar 29, 2021
Collaborator

DarpanKulkarni Mar 30, 2021
Author

ravindra135
Feb 8, 2023