通过 cookie 记住切换状态

Question

我正在寻找一种记住切换状态的方法，并在 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 来记住状态？

Answer 1

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

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

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

编辑：

JS FIDDLE

通过 cookie 记住切换状态

Remembering the toggle state via cookie

html

javascript

cookies

jquery

toggle