Save new click change with jQuery on RELOAD (new page)

Question

I made a dropdown with a html value change result, so after every click i get the new html value:

$("#list li a").on('click',function(){
 var val=$(this).html();
 $("#selector").html(val);
});

Simple enough to understand. What I'm trying to do is in the new reload, the html (val) stays on the new load. How can one do this?

I was thinking of HTML5: localStorage but really not sure if this is right?

localStorage.setItem(currentlist, $('#selector').val());

    window.onload = function() {
        var name = localStorage.getItem(currentlist);
    }

Not sure if Im doing this right or missing something. But this is where I'm at. Is this the right way to go...or do some cookie state?

Localstorage is definetly One way to Do this, but is it working or Do you have a specific problem? — empiric, Mar 24 '16 at 14:51
Possible duplicate of [How do I programatically set the value of a select box element using javascript?](http://stackoverflow.com/questions/78932/how-do-i-programatically-set-the-value-of-a-select-box-element-using-javascript) — Cory, Mar 24 '16 at 14:55
The first parameter needs to be a string that doesn't change (*I'm assuming you might be using an array*), such as: `localStorage.setItem("currentlist", $('#selector').val())`. — Spencer Wieczorek, Mar 24 '16 at 14:56
@Cory This question is not a duplicate of the one you linked to. — Spencer Wieczorek, Mar 24 '16 at 14:57
If you simply want to access the value when the page is reload, I would suggest using sessionStorage instead localstorage. If you want persistent beyond the life of the session, you should use localStorage or a database. — Jean B, Mar 24 '16 at 14:57
@Krishna `currentlist` is just a var i was making for the #selector result val — Riskbreaker, Mar 24 '16 at 14:58
`localStorage` has the ability to store with keys as strings, integers or even arrays. So that shouldn't matter, as long as you're using the same key to set and get. Although, using strings as key is the norm. — Venkata Krishna, Mar 24 '16 at 15:02
@Cory I changed the title...setting value is fine... its keeping it on reload... — Riskbreaker, Mar 24 '16 at 15:06

Venkata Krishna · Accepted Answer · 2016-03-24T15:32:55.087

2

JSFIDDLE DEMO

$("#list li a").on('click',function(){
    var val = $(this).html();
    $("#selector").html(val);
    localStorage.setItem("currentlist", val); //add to localStorage
});

and in your onload

var name = localStorage.getItem("currentlist"); //get from localStorage
$("#selector").html(name); //assign here

edited Mar 24 '16 at 15:32

answered Mar 24 '16 at 14:55

Venkata Krishna

14,926
5
42
56

what do you mean by: `(name)` would it not be `(val)`? Because its a multiple list. – Riskbreaker Mar 24 '16 at 15:02
`(name)` is just the variable you're actually assigning the value to, doesn't matter what you name it. – Jorrex Mar 24 '16 at 15:03
@Riskbreaker - I'm using the same variable name from the question in order to not confuse you. Ideally, you could use a better name and use the same for setting inside. – Venkata Krishna Mar 24 '16 at 15:03
on a side note, don't use variable names like `val`, `name`, `html` etc. Be more specific like `storedList` or `selectedHtml`. – Venkata Krishna Mar 24 '16 at 15:06
@Krishna great Let me try this method as far as `(name)`, i guess I can use that or change it to `(list)` instead of `(val)`...thanks! – Riskbreaker Mar 24 '16 at 15:10
@Krishna so all I need to add is something like so: `localStorage.setItem("currentlist", name);` changed val to name. And then add the Windows onLoad statement? – Riskbreaker Mar 24 '16 at 15:15
@Riskbreaker - the `setItem` needs to be in the click event and the variable names should match(in your case `val`). Inside your `onload` function, write the 2 lines in the bottom portion of my answer. – Venkata Krishna Mar 24 '16 at 15:18
@Krishna Roger that. One last question - where does one place the `onload` in my master js file....at end? start? does it matter? – Riskbreaker Mar 24 '16 at 15:21
Here is the demo.. https://jsfiddle.net/xsanffhd/1/ Use `$(document).ready` instead. So that you won't wait for other resources to load. – Venkata Krishna Mar 24 '16 at 15:31

Save new click change with jQuery on RELOAD (new page)

1 Answers1