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

EDITS：

JS菲德爾

通過Cookie記住切換狀態

問題描述

1 個解決方案

解決方案1
0 已采納 2017-05-09 11:15:08

通過Cookie記住切換狀態

問題描述

1 個解決方案

解決方案1 0 已采納 2017-05-09 11:15:08

解決方案1
0 已采納 2017-05-09 11:15:08