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

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

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

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

DarpanKulkarni Mar 29, 2021

Replies: 2 comments · 2 replies

SimoTod Mar 29, 2021 Collaborator

DarpanKulkarni Mar 30, 2021 Author

ravindra135 Feb 8, 2023

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