Preserve dynamically changed select values when back button clicked

Question

I have a form which filters through different cars, and it's working perfect.

When a user selects a "Make" the correct sibling "Models" are populated into the next dropdown, so on and so forth.

The problem is that once a user has performed a search, if they click the browser's back button, the select values which are dynamically populated - are back to default!

I am not using ajax to dynamically populate the select fields, but only javascript where I am reading a JSON file and updating the models/series/etc like that.

I have looked at this post: Preserve dynamically changed HTML on back button

And I do not understand how this works, I have also heard about localstorage - what would be the best avenue for me to travel down? Thanks.

Some users may just clicked the back button - I want to preserve the data they entered into select fields like many websites do. — Notorious, Mar 06 '17 at 14:47
you could do it via local storage, cookies, or by storing the search terms in the session (or DB) on the server. Lots of ways to implement. The key concept is to preserve _state_. The web is inherently _stateless_ - by default it remembers nothing about previous requests. This is both a blessing and a curse, in different scenarios. — ADyson, Mar 06 '17 at 15:06

score 2 · Answer 1 · answered Feb 10 '20 at 23:11

2

Using localStorage for this can be a bit unwieldy (when and how should I clear this value?) and there are security related considerations that may make it an infeasible solution.

Another option is to use a hidden textbox which makes use of the browser's default behaviour.

When a page is loaded after clicking the back button, browsers appear to populate textboxes based on the value contained in it when the user left the page (even if that value was dynamically changed). Note, this is different to how hidden inputs are handled, where dynamic changes are ignored, so you must use a textbox.

<select></select>
<input type="text" style="display:none" />

<script>
  // store the dropdown's value in a hidden textbox which is persisted and 
  // used to populate the dropdown when the back button is used to get here
  $('select').on('change', function() {
    $('input').val($(this).val());
  });

  // example showing dynamic population of dropdown
  $.ajax({
    url: 'api/get-dropdown-options',
    success: function(data) {
      // dynamically populate the dropdown
      $('select').html(data);

      // update the dropdown's value based on the persistent value
      // retained in the hidden textbox
      $('select').val($('input').val());
    }
  });
</script>

answered Feb 10 '20 at 23:11

ajbeaven

9,265
13
76
121

This is a good tip. I found localStorage/sessionStorage not helpful because if you click the back button several times, you would expect text boxes populated accordingly, and this means implementing your own tree navigator. Text boxes help, BUT: unfortunately they must be hidden for this behavior to work. So, for each visible text box, I must maintain a hidden one just to store data and then populate visible from hidden OnBodyLoad(). Does anyone know a better way ? – Dmitry z Jul 02 '20 at 19:36
I must not understand your scenario because if the controls you're wanting to preserve the value for are already (visible) textboxes, I don't see how the additional hidden textboxes will help you. Note my answer was for a scenario where you are preserving the selected state of a `select` element, and may not be the best choice for use with other controls. – ajbeaven Jul 06 '20 at 04:00
Visible textboxes don't preserve their values on back button, that's what I found(Chrome 83). But, I figured I can use window.location (url) to retrieve old values- that gets changed properly on back button – Dmitry z Jul 09 '20 at 02:33
Something in your app must be clearing the values then. Default browser behaviour since ages ago preserves the value. Go [here](https://www.w3schools.com/html/html_forms.asp) type something in the textbox, navigate away and click the back button. – ajbeaven Jul 09 '20 at 11:01

Reza Karami · Accepted Answer · 2017-03-06T15:06:19.070

1

Because the data is dynamically loaded, the browser will not be able to repopulate the previously selected entries when the user goes back to the previous page.

I suggest you make use of the browser's localStorage to store the latest selections and retrieve them when the user goes back. To accomplish that it's as simple as setting a new variable to the localStorage object and later retrieving it like so:

localStorage.make = "BMW";

alert(localStorage.make);

Also here's a more useful example:

select = document.getElementById("make");

if (localStorage.make) {
    select.options[localStorage.make].selected = true;
}

edited Mar 06 '17 at 15:06

answered Mar 06 '17 at 15:00

Reza Karami

505
1
5
15

Ahaa! I think this is finally starting to make sense, and I'm understanding localStorage - this has worked for me. I have managed to save the current value in localstorage which shows when the back button is clicked. Now I suppose I will try to run a foreach loop over all select values and add that to localstorage. Thanks for your answer! – Notorious Mar 06 '17 at 15:29
No problem. You could also avoid having to loop over all the values by getting the selected value of a dropdown directly like so: `select.options[select.selectedIndex].text` – Reza Karami Mar 06 '17 at 15:44
And if this answers your question, be sure to mark my answer as the correct answer :) – Reza Karami Mar 06 '17 at 15:46
Ahh I see, I actually just grabbed all the HTML inside the select and put that in localstorage. Everything was working perfectly until 2 mins ago - I added localStorage.clear(); - then removed this, and now localStorage is not working all of a sudden. I will have to google this, weird lol. Thankyou a lot for your answer, really helped me! – Notorious Mar 06 '17 at 15:53
That sounds like another issue. Try clearing the browser cache/data for the past hour, that might help. Good luck! – Reza Karami Mar 06 '17 at 16:06
1

Thanks for your reply! My problem was wrapping it inside if (localStorage.make) { } - strange, because this wasn't an issue until I cleared localStorage. Everything is working good now though, your example helped me heaps - best wishes and I hope you make lot's of money this year! Cheers! :) – Notorious Mar 06 '17 at 16:14

Preserve dynamically changed select values when back button clicked

2 Answers2