I have this section of code that saves a list item on click to localStorage based on the list item's id number. On a different page I am then able to load whatever list items were saved.

var save1075 = $('#store-1075').get(0);
$('#store-1075').on('click', function () { 
    var storeStorageKey1075 = $(this).attr('id'); 
    localStorage.setItem('storeStorageKey1075', $(this).attr('id'));
    localStorage.setItem('storeStorageKey1075', this.innerHTML);
});

if ( localStorage.getItem('storeStorageKey1075') ) {
save1075.innerHTML = localStorage.getItem('storeStorageKey1075'); 
}

var storeStorageKey1075 = $(this).attr('id');
    if ( localStorage.getItem('storeStorageKey1075') ) {
    storeStorageKey1075 = localStorage.getItem('storeStorageKey1075');

}

Right now I have to repeat that chunk of code for every individual id number and I'm trying to instead make the id number a variable that loops through all possible id numbers when clicked but only saves the id of that specific one. Maybe something along the lines of this:

var id = //some sort of loop or array of possible ids.
var save = $('#store-'+id).get(0);
$('#store-'+id).on('click', function () { 
    var storeStorageKey = $(this).attr('id'); 
    localStorage.setItem('storeStorageKey', $(this).attr('id'));
    localStorage.setItem('storeStorageKey', this.innerHTML);
});

if ( localStorage.getItem('storeStorageKey') ) {
save.innerHTML = localStorage.getItem('storeStorageKey'); 
}

var storeStorageKey = $(this).attr('id');
    if ( localStorage.getItem('storeStorageKey') ) {
    storeStorageKey = localStorage.getItem('storeStorageKey');

}

Each of the list items has the same prefix of "store-" and the numbers are in no specific order but randomly generated each time a new store location is created.

I have this section of code that saves a list item on click to localStorage based on the list item's id number. On a different page I am then able to load whatever list items were saved.

var save1075 = $('#store-1075').get(0);
$('#store-1075').on('click', function () { 
    var storeStorageKey1075 = $(this).attr('id'); 
    localStorage.setItem('storeStorageKey1075', $(this).attr('id'));
    localStorage.setItem('storeStorageKey1075', this.innerHTML);
});

if ( localStorage.getItem('storeStorageKey1075') ) {
save1075.innerHTML = localStorage.getItem('storeStorageKey1075'); 
}

var storeStorageKey1075 = $(this).attr('id');
    if ( localStorage.getItem('storeStorageKey1075') ) {
    storeStorageKey1075 = localStorage.getItem('storeStorageKey1075');

}

Right now I have to repeat that chunk of code for every individual id number and I'm trying to instead make the id number a variable that loops through all possible id numbers when clicked but only saves the id of that specific one. Maybe something along the lines of this:

var id = //some sort of loop or array of possible ids.
var save = $('#store-'+id).get(0);
$('#store-'+id).on('click', function () { 
    var storeStorageKey = $(this).attr('id'); 
    localStorage.setItem('storeStorageKey', $(this).attr('id'));
    localStorage.setItem('storeStorageKey', this.innerHTML);
});

if ( localStorage.getItem('storeStorageKey') ) {
save.innerHTML = localStorage.getItem('storeStorageKey'); 
}

var storeStorageKey = $(this).attr('id');
    if ( localStorage.getItem('storeStorageKey') ) {
    storeStorageKey = localStorage.getItem('storeStorageKey');

}

Each of the list items has the same prefix of "store-" and the numbers are in no specific order but randomly generated each time a new store location is created.

• javascript
• arrays
• variables
• loops
• local-storage

• Why are you setting the storeStorageKey in localStorage to the id and them immediately overwriting it with the innerHTML? – I Hate Lazy Commented Oct 25, 2012 at 16:58

3 Answers 3

The obvious thing to do is to add a class but you could also:

var elems = $( "[id^='store']")

elems.on( "click", function() {//Save html on click
    localStorage.setItem( this.id, this.innerHTML );
});

    //Retrieve html
elems.each( function() {
    var html = localStorage.getItem( this.id );

    if( html ) {
        $(this).html( html );
    }
});

This loops over all keys that begin with storeStorageKey:

for (var i=0; i<localStorage.length; i++) {
    var key = localStorage.key(i);
    if (/^storeStorageKey/.test(key)) {
        var item = localStorage.getItem(key);
        // do something with item
    }
}

Instead of using a prefix in the id I'd suggest adding a class to indicate that an item is storable:

<div class="storable" id="store-1234">...</div>

then you can use the class to select all the storable things in one go:

$('.storable').on('click', function () { 
    var storeStorageKey = $(this).attr('id'); 
    ...
});