JQuery show/hide div 切换刷新后保持打开状态

Question

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

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

为了在页面之间保持聊天 window 状态，您需要将状态保存在某处。

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

Answer 2

在我看来，需要使用 Cookie or Local storage 来保留当前会话的用户首选项。所以当页面呈现时，检查初始状态并在每次点击时更新状态。
可以找到使用cookies的例子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。

JQuery show/hide div 切换刷新后保持打开状态

JQuery show/hide div toggle stay open after refresh

html

jquery

refresh

toggle