如何使用 js 使 "mode" 在刷新页面后仍保持不变

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

在我的网站上有一个按钮，用于设置某种 "display mode"，当用户连续按下它3次时，它使导航栏消失。

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

现在进入问题-

我想让 "display mode" 保持不变，即使用户会刷新页面，在上面的代码中，当用户按下按钮 3 次时，导航栏消失了，但是当他刷新页面时，导航栏又会回来。我怎样才能让它保持隐藏状态？我需要添加什么？

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

如何使用 js 使 "mode" 在刷新页面后仍保持不变

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

jquery

refresh