JQuery 显示/隐藏 div 切换在刷新后保持打开状态

Question

我的网站右下角有一个聊天框，打开和关闭都没有问题。默认情况下它是隐藏的，然后当您单击“聊天”时它会保持打开状态！我的问题是我希望聊天框在用户更改页面时保持打开状态，直到他们决定再次将其最小化。目前，如果您更改页面，聊天框会自动最小化。有人可以帮忙吗？

jQuery(document).ready(function() {
  jQuery('#hideshow').on('click', function(event) {
    jQuery('#initiallyHidden').toggle('show');
  });
});

#chatbox {
  position: fixed;
  bottom: 0;
  right: 0;
  float: right;
}

#initiallyHidden {
  bottom: 100;
  right: 0;
  float: right;
  width: 300px;
  height: 200px;
  border-style: solid;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox"><input type="button" id="hideshow" value="Quick Chat" class="tbox" />
  <br>
  <div id="initiallyHidden" style="display: none;">Content</div>

以上是所有用于此的脚本。

谢谢

Answer 1

为了保持页面之间的聊天窗口状态，您需要在某处保持状态。

例如，当用户打开聊天时，您可以设置一个 cookie 来存储新状态。加载每个页面时，您将检查 cookie 的当前状态（打开/关闭），如果没有可用的 cookie，则默认。

Answer 2

在我看来，需要使用Cookie 或Local storage 来保持当前会话的用户首选项。因此，在呈现页面时，请检查初始状态并在每次点击时更新状态。
使用cookie的例子可以在here找到。
所以这个例子看起来像这样（使用js-cookie）：

$(document).ready(function() {
  var chatVisible = 'chatVisible';
  var chatElement = $('#initiallyHidden');
  var getCookie = function() {
    return JSON.parse(Cookies.get(chatVisible) || 'false');
  };
  var setCookie = function(value) {
    Cookies.set(chatVisible, value)
  };
  var visible = getCookie();
  chatElement.toggle(visible);
  setCookie(visible);

  $('#hideshow').on('click', function() {
    var visible = !getCookie();
    setCookie(visible);
    chatElement.toggle(visible);
  });
});

#chatbox {
  position: fixed;
  bottom: 0;
  right: 0;
  float: right;
}

#initiallyHidden {
  bottom: 100px;
  right: 0;
  float: right;
  width: 300px;
  height: 200px;
  border-style: solid;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
<div id="chatbox">
  <input type="button" id="hideshow" value="Quick Chat" class="tbox" />
</div>
<br>
<div id="initiallyHidden" style="display: none;">
  Content
</div>

请注意，当您使用网络服务器提供文件时，chrome 中的 cookie 可以正常工作，而不仅仅是打开文件。如果您需要这种可能性，请参考this answer。即使是静态文件，Firefox 也可以提供 cookie。