javascript - Using Local Storage to set a class for user preference -

please see "latest update" below - niel s has found local storage solution view mode part of question - still need find solution local storage work sort function.

my question started off like:

please take @ fiddle

as can see:

1) sort by: i've got option of sorting child elements either price or pax.

2) view mode: child elements default viewed 3 column layout (default view) ... , i've given user option of switching view 1 column layout (alt view) if prefer.

great, works 100% fine problem these choices or preferences can't saved or carried throughout entire session surfing website. in other words, if user decides display listings in:

a) price lowest highest

b) alt view

... , click on page 2 (where there more of these listings), layout , order go normal making user have re-click on preferences had chosen before on first page - means facility pretty stupid (if cannot remember).

so know local storage solution battling implement no success , that's because new it.

i've got other scripts using local storage , trying copy did , try apply this.

like example, attempt view mode user option adding:

localstorage.setitem("viewmode", "alt"); 

so complete method, code this:

  jquery(document).ready(function() {    $('.order a.layout').on('click', function(e){   e.preventdefault();    if($(this).hasclass('active')) {   // nothing if clicked link active   return;   }    $('.order a.layout').removeclass('active');   $(this).addclass('active');     var clickid = $(this).attr('id');   $('.listings').fadeout(240, function(){   if(clickid == 'thumbnails-list') {     $(this).addclass('alt');   localstorage.setitem("viewmode", "alt");   } else {     $(this).removeclass('alt');   }    $('.listings').fadein(200); });  });  }); 

which doesn't work.

that's view mode part ... setting localstorage sort by part seems bit daunting / higher grade , i've attempted few feeble attempts know i'm not doing right.

is there simple solution apply local storage both preference options?

i'd appreciate / guidance , can imagine great solution others looking same project.

update:

i've broken down script tackle view mode part of all. see fiddle , following javascript:

jquery(document).ready(function() {  $('.order a.layout').on('click', function(e){ e.preventdefault();  if($(this).hasclass('active')) {   // nothing if clicked link active   return; }  $('.order a.layout').removeclass('active'); $(this).addclass('active');   var clickid = $(this).attr('id'); $('.listings').fadeout(240, function(){    if(clickid == 'thumbnails-list') {     $(this).addclass('alt');     localstorage.setitem("viewmode", "alt");   }     else {     $(this).removeclass('alt');     localstorage.setitem("viewmode", "default");   }     $('.listings').fadein(200);  });  });  }); 

notice in javascript above, i've created setitem's:

if(clickid == 'thumbnails-list') {     $(this).addclass('alt');     localstorage.setitem("viewmode", "alt");   }   else {     $(this).removeclass('alt');     localstorage.setitem("viewmode", "default");   } 

when go on chrome resources > local storage , test see if these setitems working, indeed.

my problem battling getitem part doing head in!

latest update (part 2):

neil s has provided great , simple solution view mode state! works charm!

i trying work on getting sort price or pax (see original / first fiddle) use local storage proving harder thought:

please see fiddle of attempt use local storage sort price.

what makes more complicated fact sort by can either go in ascending or descending order.

as can see in fiddle, i've done (and i've done many other attempts looks logical):

if (localstorage.getitem('sortby') == 'price') {  $(function() { ratingascending = true; var sorted = $('.listings').sort(function(a,b) {     return (priceascending ==            (converttonumber($(a).find('span').html()) <              converttonumber($(b).find('span').html()))) ? 1 : -1; }); priceascending = !priceascending; $('.results').append(sorted); })  } 

nothing special here ... i've done replaced:

$('.container').on('click','.sortbyprice',function(){ 

with

$(function() { 

... because click function obsolete it's 'memory' thing.

surely should work?

i've tried this:

if (localstorage.getitem("sortby") == "price") {       // answer lies      $('.container .results').append(sorted);  } 

and no success.

i need have local storage remember user had chose preference sort - price ... when user clicks on page 2 ... listings on page sorted price.

you don't have code load localstorage value , apply class listings.

i've updated fiddle: https://jsfiddle.net/n2o70xgg/2/

this added:

 if (localstorage.getitem('viewmode') == 'alt') {     $('.listings').addclass('alt'); }