带 cookie 的全屏滑动切换

Question

我正在使用一个垂直的滑动开关，它与页面一样高，宽度也是如此。默认情况下，切换显示为打开。即使在刷新页面时，我也希望该切换开关保持打开状态。我读过另一个问题和答案，我知道我可以通过使用 jquery Cookie（作者 Klaus H.）来实现这一点包含我不需要的部分，我无法区分我真正需要的部分。我在这方面还很陌生，所以非常感谢您的帮助！

这是到目前为止的脚本：

   jQuery(document).ready(function(){
   var r=0, dir=true;
   jQuery(".slide").click(function() {
   dir = !dir;
   r = dir? -1300 : 0;
   jQuery(this).stop().animate({left: r+'px'}, 800);
   });
   });

这是css

.blunt {
background: #fff;
height: 100%;
position: fixed;
top: 0;
width: 1356px;
z-index: 999;
}

.slide {
background: #fff;
cursor: pointer;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}

这是我试图理解的问题和答案：

How to set a cookie in jquery using toggle()
jQuery Toggle with Cookie

Here the code I have

如果您需要更多解释，我很乐意再试一次（因为英语不是我的母语）。非常感谢！

Answer 1

所以我会使用本地存储，因为您似乎只想处理客户端数据。参见此处：Local Storage vs Cookies.

并使用以下设置。

localStorage[key] = value

获取价值使用。

localStorage[key];

在你的情况下是这样的。

$(function(){ // Page Load Function
    var defaultToggleState = true;
    var localStorageValue = localStorage["displayToggled"];
    // if localStorageValue not set then use default
    var displayToggled = localStorageValue === undefined ? defaultToggleState : localStorageValue;

    if(displayToggled){
        // DO STUFF
        // DEPENDING ON STUFF SET localStorage["displayToggled"] to a value.
    }
})

我在这里添加了一个工作示例。

https://jsbin.com/pubobekuze/edit?js,output

另一个更深入的例子

$(function(){ // Page Load Function
    var defaultToggleState = true;
    var localStorageValue = localStorage["displayToggled"];
    // if localStorageValue not set then use default
    var displayToggled = localStorageValue === undefined ? defaultToggleState : localStorageValue;
    // Now get the page load offset value
    var rightValue = displayToggled === "true" ? 0 :-280;
    // Now set the page load offset
    $("#slide").css({left: rightValue+'px'});

    // Bind the click event
    $("#slide").click(function() {
        // Get Value
        var localDisplayToggled = localStorage["displayToggled"];
        // Invert or Default
        localStorage["displayToggled"] = localDisplayToggled === undefined ? 
            false : 
            (localDisplayToggled === "true" ? false : true);
        // Get Value again as it has changed
        localDisplayToggled = localStorage["displayToggled"];

        var rightValue = localDisplayToggled === "true" ? 0 : -280;
        $(this).stop().animate({left: rightValue+'px'}, 800);
    });
});

带 cookie 的全屏滑动切换

Fullscreen slide-toggle with cookie

html

javascript

onclick

toggle