I cannot get toggle state to remember state on refresh, using alpinejs, tailwindcss & localStorage

[richwebmedia]

First of all I apologise if this is not the place to ask for some guidance. Please let me know if that's the case.

I have a toggle using TailwindCSS that when toggled sets a localStorage to true or false using AlpineJS. This works, albeit it sets false when on. But my problem is that when the page refreshes the localStorage sticks but the toggle doesn't and defaults the button to on.

I'm new to development in general but I'm looking for an else if on the x-data="{ on: true }" but I don't think that's possible.

I know this example is wrong, but this is what I'm trying to achieve.

// x-data="{ localStorage.getItem('Consent3') === true: on: true, localStorage.getItem('Consent3') === false: on: false }"

Can anyone explain to me how I can achieve this? It would be greatly appreciated.

Here's the codepen.

https://codepen.io/williamharvey/pen/xxXaJgM

And here's the code.

Cookies that measure website use

Use setting

[danddanddand]

You might want to just consider using Persist plugin https://alpinejs.dev/plugins/persist. You can see the example handles this case and if you want to use localStorage directly you can just set it on x-init.

[richwebmedia]

Thanks for the reply, I'm trying to get my head around the persist documentation. I'm not sure how I would implement that on x-init.

Thank you again for the reply.

[danddanddand]

In the x-init you'd just get the value from local storage and set it if so