how to make a "mode" stay even after you refresh the page, using js

Question

(function($){

// A collection of elements to which the tripleclick event is bound.
var elems = $([]),

    // Initialize the clicks counter and last-clicked timestamp.
    clicks = 0,
    last = 0;

// Click speed threshold, defaults to 500.
$.tripleclickThreshold = 500;

// Special event definition.
$.event.special.tripleclick = {
    setup: function(){
        // Add this element to the internal collection.
        elems = elems.add( this );

        // If this is the first element to which the event has been bound,
        // bind a handler to document to catch all 'click' events.
        if ( elems.length === 1 ) {
            $(document).bind( 'click', click_handler );
        }
    },
    teardown: function(){
        // Remove this element from the internal collection.
        elems = elems.not( this );

        // If this is the last element removed, remove the document 'click'
        // event handler that "powers" this special event.
        if ( elems.length === 0 ) {
            $(document).unbind( 'click', click_handler );
        }
    }
};

// This function is executed every time an element is clicked.
function click_handler( event ) {
    var elem = $(event.target);

    // If more than `threshold` time has passed since the last click, reset
    // the clicks counter.
    if ( event.timeStamp - last > $.tripleclickThreshold ) {
        clicks = 0;
    }

    // Update the last-clicked timestamp.
    last = event.timeStamp;

    // Increment the clicks counter. If the counter has reached 3, trigger
    // the "tripleclick" event and reset the clicks counter to 0. Trigger
    // bound handlers using triggerHandler so the event doesn't propagate.
    if ( ++clicks === 3 ) {
        elem.trigger( 'tripleclick' );
        clicks = 0;
    }
};

})(jQuery);

$(function()
{
    $("#SNLCK").on("tripleclick", function()
    {
        $(".bannerContainer").toggle();
    });
});

in my website there is a button that is used to set some sort of a "display mode", when the user presses it 3 times in a row, it makes the navigation bar disappear.

as far a fuctionality, it works fine.

now to the problem-

i want to make the "display mode" stay, even if the user will refresh the page, in the code above, when the user press on the button 3 times the navigation bar disapperas, but when he will refresh the page, the navigation bar will be back. how can i make it stay hidden? what do i need to add?

Answer 1

There is a built-in storage in browsers that you can utilize. You could store a key value to local storage and check it on document ready;

$(function()
{
    if(localStorage.getItem("tripleClickState")=="0"){
        $(".bannerContainer").show();
    }else{
        $(".bannerContainer").hide();
    }

    $("#SNLCK").on("tripleclick", function()
    {
        $(".bannerContainer").toggle();

        // store a value to local storage;
        if(localStorage.getItem("tripleClickState")=="0"){
            localStorage.setItem("tripleClickState", "1");
        }else{
            localStorage.setItem("tripleClickState", "0");
        }
    });
});