Jquery - Unable to retain <selected> & <input> latest values after page refresh

Question

I am trying to do something really basic, but its proving harder than I anticipated. Long story short, I am using ajax to load content between product pages. On the odd occasion a user might refresh a page (loading the original) and then refilling a cart section below the product section.

I am passing their cart items between pages (and reloads) as a table of values written to local storage and then retrieved from there. All this works fine, except...:

PROBLEM: The 'input' and 'selected' elements are not keeping their selected values, and instead revert back to whatever the default selection is. I've isolated this to browser behavior, as FireFox will actually keep the selected values on reload (unless you repeatedly reload). Chrome and IE will just reset to default on reload (as in whatever is the written select="selected" or value associated with an 'input' from the source HTML).

How do I force an instant attribute rewrite for 'input' & 'selected' elements the instant their value changes? Like this example:

          <select name="Size" class="os0" onchange="calculateTotal()">
            <option value="20" selected="selected">20cm sq</option>
            <option value="30">30cm sq</option>
            <option value="45">45cm sq</option>
            <option value="60">60cm sq</option>
          </select>

Now when a user updates the size in the quote table to, say 60cm sq, it should remove the selected="selected" attribute and actually rewrite it to option value="60" - it has to be a rewrite to the html itself, else it does not survive refreshes.

I hope this is clear and can elaborate more if anyone needs more info.

Answer 1

There are several ways in which you could achieve that

1. Use $_COOKIE to save temporary data on client side and then retrieve this cookie each time the page is refreshed or reloaded. Downside to this is being client side, the data can be tampered with/removed by the user which can cause the same problem again. Check out cookies here
2. Use localStorage which is similar to cookies since it is also on the client side. Check out localStorage here
3. Use $_SESSION which is safer than localStorage and cookies since it is server side and cannot be tampered with. But again saving too much data to session might cause issues later if there are several hits to your site simultaneously.

For localStorage you can easily check the selection using jquery or javascript. For input field do something like

if(localStorage.getItem("itemname") !== null) {
// denotes the value exists
$('inputName').val('localStorage item')
}

Similarly for select:

var text = localStorage.getItem("itemname");
if(text !== null) {
$("select option").filter(function() {
    return this.text == text;
}).attr('selected', true);
}