local storage form multiple
HTML
<form name="Filter">
<select multiple="1" id="filter">
<option value="111">Andrew</option>
<option value="222">Bill</option>
<option value="333">Charles</option>
<option value="444">Dikembe</option>
<option value="555">Edward</option>
</select>
</form>
<div id="store">click to store</div>
<div id="myStorage"></div>
CSS
#store {
cursor:pointer;
}
JavaScript
$("#store").click(function () {
//get the selected options in the form of an array
var optArray = $("#filter option:selected").map(function () {
return {
"title": this.innerHTML,
"value": this.value
}
}).get();
console.log(optArray);
//set that to localStorage
localStorage["optArray"] = JSON.stringify(optArray);
//refresh myStorage
getFromStore();
});
var getFromStore = function () {
//check if store values are null, if null, make store =[]
var store = [undefined, null].indexOf(localStorage["optArray"]) != -1 ? [] : JSON.parse(localStorage["optArray"]);
console.log(store);
//empty container before u put values
$('#myStorage').html('');
//check if store is empty
if (store.length != 0) {
//loop over store if it aint empty and append the content into myStorage div
for (var k in store) {
$("[value=" + store[k]["value"] + "]","#filter").prop("selected", true);}
}
}
getFromStore();