Javascript 使用slideToggle（）jQuery并记住页面刷新上的设置

我有下面的代码，它是一个div，同时显示一个按钮，允许你返回，然后隐藏自己

$(document).ready(function() {

$("#about-user-widget .hide-btn").click(function(){
    $("#about-user-widget").slideToggle();
    $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');
});
//reverses the above action
$("#show-button").click(function(){
    $("#about-user-widget").slideToggle();
    $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: none;');
});
})

上面的方法非常有效，但是当我刷新页面时，它会返回默认值。

关于用户小部件

打开，并且

显示按钮

可见性设置为隐藏

我的问题是，如何重新加载页面以记住我的设置？例如，如果单击了隐藏，那么

关于用户的小部件

被隐藏，并且

显示按钮

可见。刷新页面时，如何保持该设置

默认情况下，

显示按钮

设置为隐藏

<div class="pull-right" id="show-button" style="margin-bottom: 5px; font-size: 11px; color: #ddd; visibility: hidden;"><a href="#"><i class="fa fa-eye"></i> Show</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span></div>

|

我知道我需要以某种方式将其提交到内存中（cookie，某种本地存储），但作为jquery的新手，我不确定如何实现它

---

任何帮助都将不胜感激

首先我不明白你为什么需要两个按钮？您只需按一个按钮即可实现这一点。 根据保存显示/隐藏的div状态

您可以使用Cookie或首选metnod中的存储

根据cookie；阅读以下内容

下面是您可以尝试的示例： 我使用了这个插件：

HTML部分：

<input id="button" type="button" value="show/hide" />
<div id="about-user-widget" style="display: none; width: 100px; height: 100px; background: #b2000b">some text</div>

一些文本

---

了解cookies插件与浏览器的兼容性；我使用FireFox进行了测试，并且正在工作。

第一个按钮

.hide btn

实际上位于

div

上，该按钮在视图中切换得很低。就在上面，我显示了

显示按钮

，这样我们就可以切换回去了；请随时修改和使用您的申请；如果您需要进一步的澄清，请随意，以便我改进。

<input id="button" type="button" value="show/hide" />
<div id="about-user-widget" style="display: none; width: 100px; height: 100px; background: #b2000b">some text</div>