Save and retreive users layout preference from on click function using localstorage

Question

I'm new to using localstorage but believe this is what I would need to use for storing a particular ID or CLASS from my css file to render in a users browser once they made their selection (on click event) to display a "grid / list" layout. Is localstorage preferred here? Or would it be better to use "sessionstorage"? Or would it be better to use a completely different method altogether? And if so, what?

What I am trying to achieve is this: User clicks on 1 of 2 icons - These icons need to store the css layout ID or CLASS I've made (either "cozy" or "list" view). As the user goes through other pages of the website, this preference is remembered so if the user goes back to this page, the layout is still the same from what he/she selected. Same would apply if the user closed their browser and then re-opened it to that page.

Adding a cached for time would be preferred as well. For example, keeping the layout in the users localstorage for "x" amount of days before it is cleared.

Any help would be greatly appreciated as I have no idea how to even start this. I've looked at tons of examples, but can't seem to wrap my head around how they did it and worse yet, the examples I've seen seem not to cater to my needs.

Here is what I have so far:

JS

// Changing layout 'Cozy' to 'List'
$('.news_nav-options_list').on('click', function () {
    var cozy=document.getElementById('hideClass');
    cozy.style.display="none";

    var list=document.getElementById('showClass');
    list.style.display="block";

    $(this).addClass('active');
    $('.news_nav-options_cozy').removeClass('active');
});

// Changing layout 'List' to 'Cozy'
$('.news_nav-options_cozy').on('click', function () {
    var list=document.getElementById('hideClass');
    list.style.display="block";

    var cozy=document.getElementById('showClass');
    cozy.style.display="none";

    $(this).addClass('active');
    $('.news_nav-options_list').removeClass('active');
});

And here is a demo of what I have so far:

DEMO

I read using the ".setItem() and .getItem" with localstorage is preferred but again, I have no idea how I should even start. Can localstorage be applied to what I currently have for my js?

Answer 1

This isn't quite correct, but I think it should point you in the direction you are looking for.

$(document).ready(function(){
    // Changing layout 'Cozy' to 'List'
    $('.news_nav-options_list').on('click', function () {
        changeToListView();
    });

    // Changing layout 'List' to 'Cozy'
    $('.news_nav-options_cozy').on('click', function () {
        changeToCozyView();
    });

    if (typeof(Storage) !== "undefined") {
        var view = localStorage.getItem("view");
        if (view && view == "cozy") {
            changeToCozyView();
        } else if (view && view == "list") {
            changeToListView();
        } else {
            // view isn't set, or is set to something we don't recognize
        }
    } else {
        // user's browser doesn't support localStorage
    }        
});

function changeToListView() {
    var cozy=document.getElementById('hideClass');
    cozy.style.display="none";

    var list=document.getElementById('showClass');
    list.style.display="block";

    storagePut("list");

    $(this).addClass('active');
    $('.news_nav-options_cozy').removeClass('active');
}

function changeToCozyView() {
    var list=document.getElementById('hideClass');
    list.style.display="block";

    var cozy=document.getElementById('showClass');
    cozy.style.display="none";

    storagePut("cozy");

    $(this).addClass('active');
    $('.news_nav-options_list').removeClass('active');
}

function storagePut(view) {
    if (typeof(Storage) !== "undefined") {
        localStorage.setItem("view", view);
    } else {
        // user's browser doesn't support localStorage
    }        
}