Here, we are using both sessionStorage and localStorage to retain the values after refresh a div. The div named refresh (#refresh) get refresh after a time interval of 5s. Values in the array sort using updateContent(arr,$opts) function. These sorted values are stored using localStorage.setItem("res", JSON.stringify(arr)) and corresponding selected dropdown value is stored using sessionStorage.setItem("SelectedItem", dropVal). To get the values after refresh, we used .getItem() method.
Example:
abc.js
$(document).ready( function(){
var arr = [], $opts = 1;
arr.push({"name":"Corsair","price":"2000"});
arr.push({"name":"Cooler Master","price":"3000"});
arr.push({"name":"Antec","price":"1000"});
$(document).on('change', '#sort-item', function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
$opts = $(this).find('option:selected')[0].dataset.sort;
updateContent(arr,$opts);
});
updateContent(arr,$opts);
});
var refreshIntervalId = setInterval("myfunction();",5000);
function myfunction()
{
$('#refresh').load(location.href +' #refresh',function(){
var res = localStorage.getItem( "res" );
var ress = JSON.parse(res);
var $result = $('#content-container');
$result.text("");
for (var i =0; i< ress.length; i++){
$result.append('<li>'+ress[i].name+" $"+ress[i].price+'</li>');
}
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#sort-item').val(selectedItem);
});
}
function updateContent(arr,$opts) {
var $result = $('#content-container');
$result.text("");
if ( $opts == 1 ){
arr.sort( function(a,b) { return a.name > b.name; } );
}
else if ($opts == 2) {
arr.sort( function(a,b) { return a.price - b.price; } );
}
else if ($opts == 3) {
arr.sort( function(a,b) { return b.price - a.price; } );
}
for (var i =0; i< arr.length; i++) {
$result.append('<li>'+arr[i].name+" $"+arr[i].price+'</li>');
}
$(document).on('change', '#sort-item', function() {
$opts = $(this).find('option:selected')[0];
localStorage.setItem("res", JSON.stringify(arr));
console.log($opts.dataset.sort);
});
}
index.html
<body>
<div id="refresh">
<div id="sort-wrapper" class="sort-position">
<div id="sort-container">
Sort by:
<select id="sort-item">
<option value="Alphabetical" data-sort="1">Alphabetical</option>
<option value="low to high" data-sort="2">Low to High Price</option>
<option value="high to low" data-sort="3">High to Low Price</option>
</select>
</div>
</div>
<div id="content-wrapper" class="content-position">
<div id="content-container">
</div>
</div>
</div>
</body>
0 Comment(s)