即使在刷新页面后，如何使用 js 保持“模式”答案

【问题标题】：how to make a "mode" stay even after you refresh the page, using js即使在刷新页面后，如何使用 js 保持“模式”
【发布时间】：2019-12-23 00:42:25
【问题描述】：

(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();
    });
});

在我的网站上有一个按钮，用于设置某种“显示模式”，当用户连续按3次时，导航栏消失。

就功能而言，它工作正常。

现在解决问题-

我想让“显示模式”保持不变，即使用户会刷新页面，在上面的代码中，当用户按下按钮 3 次时，导航栏消失，但当他刷新页面时，导航栏将返回。我怎样才能让它保持隐藏？我需要添加什么？

【问题讨论】：

标签： jquery refresh

【解决方案1】：

您可以使用浏览器中的内置存储。您可以将键值存储到本地存储并在准备好文档时对其进行检查；

$(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");
        }
    });
});

【讨论】：