Persist <select> option across browser restarts

Wappler General Need Help
1

Hi,

I have a <select> element and I want to persist when the user chooses an option, so if the user closes the browser and opens again the selection stays the same.

I understand I can use a Dynamic Event: Data: Value Change to capture the new selected value, but how do I store the selection in the browser? What Wappler component to use?

2

What about saving the value on local storage and then use the selected value input from the select properties?

(If you use a select input for filtering some server connect, then you can use that sc success event to save the value on local storage)

1 Like
3

State Management -> Local Storage Manager?

It was so confusing to find that one. All I could think was "Data Store" :exploding_head:

How does one even figure what component to use? I scrambled through the docs and it wasn't easy to get an overview... Like I didn't know this component existed.

Looks to be working. Will wait for more replies to see more ideas!

image
image1540×928 60.7 KB

Edit: dmx-bind:value on the <select> didn't quite work due to a race condition as the <select> data is being populated by data coming from a server connect, so I had to create a flow to run on server connect success to select the value (because otherwise dmx-bind:value would try to select a value that doesn't exist in the DOM yet, so we have to wait for the server connect to finish)

4

Hi Apple,

You can try local DataStore to save the selected value and bind it's value to the select element. The DataStore value will persist until the browser history or DataStore is cleared.

I have included an example code below. Note: I have used dmx-on:changed event instead of update event.

<div class="form-group mb-3">
   <label for="select1" class="form-label">Select</label>
   <select id="select1" class="form-select" dmx-on:changed="run([{run:{outputType:'text',action:`datastore1.clear()`}},{run:{outputType:'text',action:`datastore1.insert({selectedOption: selectedValue})`}}])" dmx-bind:value="datastore1.data[0].selectedOption">
        <option value="1">Option One</option>
        <option value="2">Option Two</option>
        <option value="3">Option Three</option>
   </select>
   <small id="select1Help" class="form-text text-muted">Enter a help text for your select.</small>
</div>
1 Like
5

But will be cleaned when user closes the browser, so won't work

6

DataStore will persist even when browser is closed. It will only clear when either browser history is deleted or DataStore is cleared.

At least that is what I have seen in my quick testing for Apple's use case and when I'm using DataStore in projects.

7

You're right! Sorry, my bad..
Learned something new :slight_smile:

1 Like
8

I went with Local Storage Manager because it's designed for individual variables, Data Store is for arrays of objects

Thank you both!

2 Likes
9

No worries at all, Francisco :slight_smile:

There's always so much to learn, but never enough time or energy!

1 Like