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

i trying basic, proving harder anticipated. long story short, using ajax load content between product pages. on odd occasion user might refresh page (loading original) , refilling cart section below product section.

i passing cart items between pages (and reloads) table of values written local storage , retrieved there. works fine, except...:

problem: 'input' , 'selected' elements not keeping selected values, , instead revert whatever default selection is. i've isolated browser behavior, firefox keep selected values on reload (unless repeatedly reload). chrome , ie reset default on reload (as in whatever written select="selected" or value associated 'input' source html).

how force instant attribute rewrite 'input' & 'selected' elements instant value changes? 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 user updates size in quote table to, 60cm sq, should remove selected="selected" attribute , rewrite option value="60" - has rewrite html itself, else not survive refreshes.

i hope clear , can elaborate more if needs more info.

there several ways in achieve that

1. use $_cookie save temporary data on client side , retrieve cookie each time page refreshed or reloaded. downside being client side, data can tampered with/removed user can cause same problem again. check out cookies here
2. use localstorage similar cookies since on client side. check out localstorage here
3. use $_session safer localstorage , cookies since server side , cannot tampered with. again saving data session might cause issues later if there several hits site simultaneously.

for localstorage can check selection using jquery or javascript. input field like

if(localstorage.getitem("itemname") !== null) { // denotes value exists $('inputname').val('localstorage item') } 

similarly select:

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