Local Storage not being read

kfawcett · February 24, 2023, 4:50pm

Wappler Version : 5.4.2
Operating System : Windows 11
Server Model: capacitor
Database Type: N/A
Hosting Type: web

Expected behavior

Local storage value should be read in actions

Actual behavior

The value in localstorage is not being returned.

How to reproduce

In this video, you’ll see I’m setting “inner text” of two elements to the value in local storage and cookie storage. The ‘true’ value in cookie storage is returned successfully, but the value in local storage is not. The ‘login activity’ text should be replaced by the value in local storage.

Teodor · February 24, 2023, 5:06pm

I see no issue adding the local storage values on the page, tested same use case as yours.
Better check your browser console for errors

kfawcett · February 24, 2023, 5:13pm

No errors are shown in console. Ignore the switch from true to 1… I was testing if booleans could be the issue.

Teodor · February 24, 2023, 5:16pm

Can you see the data available under dmx.app.data?

kfawcett · February 24, 2023, 5:18pm

No.

Teodor · February 24, 2023, 5:24pm

So … how did you set the value there?
It seems to me you didn’t set the value in the local storage manager, using a dynamic event at all

kfawcett · February 24, 2023, 5:30pm

The value in “darkmode” was set via an mouse click event that I setup on a toggle. That’s how the value was originally set in the darkmode key.

What’s weird is I made some minor changes to the name of the localstorage and switched from a boolean to text field property and now the click event created a different key with dmxState added to the beginning.

The dmxState-darkmode is showing the value.

kfawcett · February 24, 2023, 5:34pm

The end goal of all of this is to set a class on an element. I am able to see the value using dmx-text, but using dmx-class:active="(brightyard.data.darkmode == 1)" does not set the class to active.

This should have active as a class

kfawcett · February 24, 2023, 5:52pm

Ok, so it looks like trying to set a class on an <a> tag might be the problem.
In this code I am attempting to set the active class on the <li> and <a> tags.

<li dmx-class:active="(brightyard.data.darkmode == 1)"><a class="dark-switch" href="#" dmx-class:active="(brightyard.data.darkmode == 1)"><em class="icon ni ni-moon"></em><span>Dark Mode</span></a></li>

When we load the page we only see the class being set on the <li> tag.

Teodor · February 24, 2023, 5:54pm

Well if that is some kind of javascript controlled component (this switch thing), most probably the javascript is controlling the class as well.

kfawcett · February 24, 2023, 6:11pm

I think we’re almost there, or at least knowing why Wappler is creating a local storage with and without dmxState.

If I create a dynamic click event and use the regular action bindings, then it will add “dmxState” to the local storage variable.

If I use a Flow, it does not add dmxState to the front of the local storage variable.

What I had to do was manually add dmxState to the key in the Set Storage step. I don’t understand why one way auto adds it and the other does not if it’s needed for Wappler to function correctly.