通过 cookie 记住切换状态答案

【问题标题】：Remembering the toggle state via cookie通过 cookie 记住切换状态
【发布时间】：2017-10-07 16:07:02
【问题描述】：

我正在寻找一种方法来记住切换状态，并在 github 上遇到了 js-cookie。该文档解释了如何创建、读取和删除 cookie。我希望有一个例子可以帮助我更好地理解。

我需要切换一个表单以显示所有字段或仅显示必填字段（表单有点大，但所有字段都不是必需的，因此考虑隐藏那些不需要的字段，如果用户希望提供所有细节都可以简单地切换以显示所有字段）。

这个切换示例相当简单。

HTML

<html>
<head>
</head>
<body>
    <p>This is a paragraph.</p> 
    <button>Toggle between hide() and show()</button>
</body>
</html>

Javascript

$("button").click(function(){
    $("p").toggle();
});

JSFiddle

问题是当表单被重新加载时，切换状态被忘记了。我想使用 js-cookie 来记住最后的切换状态（打开或关闭）。我如何使用这个 cookie 来记住状态？

【问题讨论】：

标签： javascript jquery html cookies toggle

【解决方案1】：

您可以使用浏览器的本地存储来存储切换状态。

$("button").click(function(){
    $("p").toggle();
    localStorage.setItem("toggleState","true");
});

var state=localStorage.getItem("toggleState");
if(state=="true"){
console.log("toggled");
}

编辑：

JS FIDDLE

【讨论】：

嘿阿伦，JsFiddle pe dikha sakta hai？
@DakshB 检查小提琴。