Using Local Storage to set a class for user prefer

Please see "Latest update" below - Niel S has found a local storage solution for the VIEW MODE part of this question - but I still need to find a solution to get local storage to work for the SORT BY function.

My question started off like:

Please take a look at my fiddle

As you can see:

1) SORT BY: I've got the option of sorting the child elements either by price or pax.

2) VIEW MODE: The child elements by default are viewed as a 3 column layout (Default View) ... and I've given the user the option of switching the view to a 1 column layout (Alt View) if they prefer.

Great, that all works 100% fine however my problem is that these choices or preferences can't be saved or carried throughout their entire session surfing my website. In other words, if the user decides to display the listings in:

A) Price from lowest to highest

B) Alt View

... and then click on page 2 (where there are more of these listings), the layout and order will all go back to normal thus making the user have to re-click on the preferences they had chosen before on the first page - which means that this facility is pretty stupid (if it cannot remember).

So I know local storage is the solution however I am battling to implement it with no success and that's probably because I am very new to it.

I've got other scripts that are using local storage and I am trying to copy what they did and try apply it to this.

Like for example, my attempt for the VIEW MODE user option was adding:

localStorage.setItem("viewmode", "alt");

So to complete my method, the code would look like this:

  jQuery(document).ready(function() {

  $('.order a.layout').on('click', function(e){
  e.preventDefault();

  if($(this).hasClass('active')) {
  // do nothing if the clicked link is already 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 just for the VIEW MODE part ... now setting localstorage for the SORT BY part seems a bit daunting / very higher grade and I've attempted a few feeble attempts but I know I'm not doing it right.

Is there a simple solution to apply local storage to both preference options?

I'd really appreciate some help / guidance and I can imagine this would be a great solution for others looking to do the same with their project.

UPDATE:

I've broken down the script to tackle just the VIEW MODE part of it all. See this fiddle and the following javascript:

jQuery(document).ready(function() {

$('.order a.layout').on('click', function(e){
e.preventDefault();

if($(this).hasClass('active')) {
  // do nothing if the clicked link is already 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 the javascript above, I've created the setItem's:

if(clickid == 'thumbnails-list') {
    $(this).addClass('alt');
    localStorage.setItem("viewmode", "alt");
  } 

else {
    $(this).removeClass('alt');
    localStorage.setItem("viewmode", "default");
  }

When I go on Chrome resources > local storage and test to see if these setItems are working, they are indeed.

My problem is that I am battling to do the getItem part which is doing my head in!

LATEST UPDATE (part 2):

Neil S has provided a great and simple solution for the VIEW MODE state! Works like a charm!

I am now trying to work on getting the SORT BY price or pax (see original / very first fiddle) to also use local storage however this is proving to be much harder than I thought:

Please see this fiddle of my attempt to use local storage for the sort by PRICE.

What makes this more complicated is the fact that the sort by can either go in ascending or descending order.

As you can see in the fiddle, I've done this (and I've done many other attempts but this looks most 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 ... all I've done is replaced:

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

with

$(function() {

... because the click function is obsolete now that it's a 'memory' thing.

Surely that should work?

I've tried this:

if (localStorage.getItem("sortby") == "price") {

     // this is where the answer probably lies
     $('.container .results').append(sorted);

}

and no success.

I just need to have local storage remember that the user had chose the preference SORT BY - price ... so that when the user clicks on page 2 ... the listings on that page are also sorted by price.

You don't have any code to load the localstorage value and apply the class to listings.

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

This is what I added:

 if (localStorage.getItem('viewmode') == 'alt') {
    $('.listings').addClass('alt');
}