How to store data after window.location?

Question

Below I have a vehicle dropdown that will pull the new options from text files. I have yet to find a way to save those selected TEXT values after the page changes to the correct category page. So ultimately I changed the dropdown into a div that will display the selected dropdown as text.

So how do I either..

A. keep the dropdown values and text values after the page reloads.

B. keep the selected text and proper div displays

Any help is greatly appreciated!

HTML:

<div id="shop_vehicle_container">
    <div id="shop_vehicle">
        <div id="bl_firstRow">                    
                   <div id="vehic_sel">
                   <div class="sel_label">
                    <div class="sel_label">
                        Shop By Vehicle:
                    </div>
                 </div>
                 <div class="sel_container">
                     <select id="vehic_sel_model">
                        <option value="">Choose Model</option>
                        <option value="17Prelude">Prelude</option>
                        <option value="21Civic">Civic</option>
                        <option value="22CRX">CRX</option>
                        <option value="23CivicdelSol">Civic del Sol</option>
                        <option value="18Accord">Accord</option>
                        <option value="20Odyssey">Odyssey</option>
                        <option value="24Element">Element</option>
                        <option value="26Pilot">Pilot</option>
                        <option value="16Passport">Passport</option>
                        <option value="15CR-V">CR-V</option>
                        <option value="19S2000">S2000</option>
                        <option value="25Insight">Insight</option>
                        <option value="29Accord Crosstour">Accord Crosstour</option>
                        <option value="31Crosstour">Crosstour</option>
                        <option value="30CR-Z">CR-Z</option>
                        <option value="27Ridgeline">Ridgeline</option>
                        <option value="28Fit">Fit</option>
                    </select>
                    <select disabled ="" id="vehic_sel_year">
                    <option value="">Choose Year</option>
                    </select>   
                    <select disabled= "" id="vehic_sel_trim" onchange="VehicPaste()">
                        <option value="">Choose Trim Level</option>
                    </select>
<script src="/v/js.js"></script>    
<script src="/v/Fade to New DIv.js"></script>
<script src="/v/OpenSecondRow.js"></script>
<script>
function VehicPaste() {
    var Vehicle =document.getElementById('vehic_sel_model').options[document.getElementById('vehic_sel_model').selectedIndex].text + " "+document.getElementById('vehic_sel_year').options[document.getElementById('vehic_sel_year').selectedIndex].text+ " "+ document.getElementById('vehic_sel_trim').options[document.getElementById('vehic_sel_trim').selectedIndex].text;
    document.getElementById("VehicleMessage").innerHTML = "Honda " + Vehicle;
}
</script>
</div>
</div>
</div>
<div id="vehic_submit" style= "display: none">
<div id="VehicleMessage"></div>
<input id = "changeVehic" type="image" src="/v/changevehicle_btn.gif.png">
<script>
$(document).ready(function() {
    $("#changeVehic").click(function(){
       $('#vehic_submit').fadeOut(0, function() {
            $('#bl_firstRow').html($('#bl_firstRow').html());
            $('#bl_firstRow').fadeIn(0);
        });
    })
});
</script>
                        </div>
            <div class="clearfloat">
            </div>
<br>
        <div id="bl_secondRow" style="display:none">
            <div id="vehic_sel2">
                <div class="sel_label">
                    <div class="sel_label">
                        Shop By Category:
                    </div>
                </div>
                                <div class="sel_container">
                    <select id="vehic_sel_section">
                        <option value="">Choose Engine</option>
                    </select>
<script>
    $(function goto(){
      $('#vehic_sel_section').on('change', function () {
          var url = "/SearchResults.asp?Cat="+document.getElementById('vehic_sel_section').value
          if (url) { 
              window.location = url; 
}
      });
    });
</script>
</div>

you should check `localStorage` you should check http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — Parth Trivedi, Jan 28 '16 at 02:53
You can also add the data to the url as #hastag if you want better browser support or as ?parameter if you don't mind using server side code. — seahorsepip, Jan 28 '16 at 03:04
Or you can decode a ?parameter client side with a custom written function (Sadly no built in js support...) — seahorsepip, Jan 28 '16 at 03:07

score 2 · Accepted Answer · answered Jan 28 '16 at 03:10

change event of <select> you can localStorage

localStorage.setItem('select_vehic_sel_model', JSON.stringify($(this).val()));

and on DOM ready you can get it back as

var retrievedObject = localStorage.getItem('select_vehic_sel_model');

if(retrievedObject!=undefined && retrievedObject!=null){
   $("#vehic_sel_model").val(retrievedObject);
}

You can make json object if you are having more items like

var json = {
"select_vehic_sel_model":"<value>",
"textbox":"<value>",
"div_status":"hide",
}

score 1 · Answer 2 · answered Jan 28 '16 at 03:08

There's several options available to you as some already noted in the comments.

Use localStorage to save bits of data you need across page loads that are accessible locally (hence the name :p). You can read more about it on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Use query parameters in the URL, so tag ?item1=val1&item2=val2 or some variation of it.
Use the hash tag to append data similarly to number 2, but it doesn't actually get sent to the server. Example: #item1=asdasd,item2=valasd2.

You can also stringify an object and store the JSON in the URL, etc.

How to store data after window.location?

2 Answers2