Question

My index contains default values to render the page. I’ve filled the list in dropdown in my view according to the user action using jquery (same dropdown contains different list according to the user action).

My problem is when I refresh the page, the dropdown is restored with the default data provided in the index.

Is there any way I can pass the data to the index on page refresh, like data from the textbox or currently selected value in dropdown??

Answer 1

This should be easily done using storage or cookies…
Store the list, value and all you need in a cookie everytime it changes. On page refresh, check if the cookie exists, if it does grab the list from the cookie instead of the default values.

if(typeof(Storage)!=="undefined"){
    localStorage.dropdownlist = thelist; // The list being your list of options.
}else{
    //Storage not supported, use cookie logic instead.
}

Then, according to your page init logic, just add a check like this.

if(typeof(Storage)!=="undefined" && typeof(localStorage.dropdownlist)!=="undefined"){
   populateDropDown(localStorage.dropdownlist); // The function being the same as when jQuery calls it.
}else{
   //Storage not supported, use cookie logic instead.
}

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
You might want to consider using sessionStorage instead. The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.