保留以前由jquery隐藏的div在重新加载页面上打开

-1

我有两个div。一个充当聊天窗口启动器。聊天窗口元素默认隐藏。当我点击聊天窗口启动器元素时，聊天窗口出现，启动器隐藏。我还为聊天窗口做了一个小的关闭按钮，以反转操作。保留以前由jquery隐藏的div在重新加载页面上打开

问题是，当我重新加载页面时，聊天窗口消失，我不得不重新启动。我该怎么做，以便一旦启动了启动器，即使在页面重新加载时，聊天窗口仍然可见，因此我只能使用关闭按钮关闭它。

HTML

<div class="chat-launcher" title="Launch Chat Window"> 
    <span class=" glyphicon glyphicon-pencil chat-launcher-pencil " style="color: #ffffff;font-size: 20px;"></span> 
</div> 
<div class="chat-window "> 
    <span id="close">X</span> 
</div>

jQuery的

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.chat-launcher').on('click', function() { 
      $('.chat-window').show(); 
      $('.chat-launcher').hide(); 
     }); 
    }); 

    $(document).ready(function(){ 
     $('#close').on('click',function(){ 
      $('.chat-window').hide(); 
      $('.chat-launcher').show(); 
     }); 
    }); 
</script>

来源

2017-01-02 Caleb Amolo

您可以使用服务器端会话或cookie来跟踪打开或关闭的窗口。最好用会话ID向服务器发送一些ajax通知。 –

将它的状态存储在localStorage或服务器端会话或cookie中，以及页面加载时是否检查该状态并作出反应 – charlietfl

您是否正在使用'history.back（）'操作，方法是按下浏览器上的后退按钮？除非您正在执行AJAX查询或使用会话或cookie，否则该页面应该始终加载相同的内容。为防止页面缓存，您可以在不想更改的页面上使用'onunload = function（）{}'，就像这样，当客户端点击后退按钮时，您将无法获得缓存状态。 – PHPglue

你为了保存聊天窗口的状态需要一个持久存储;如服务器端会话，客户端Cookie或localStorage。

利用localStorage，这将是沿着线的东西：

$(document).ready(function() { 
    $('.chat-launcher').on('click', function() { 
     $('.chat-window').show(); 
     $('.chat-launcher').hide(); 

     // Set a flag indicating that the char window is open 
     localStorage.setItem('chatWindowOpen', true); 
    }); 

    $('#close').on('click',function(){ 
     $('.chat-window').hide(); 
     $('.chat-launcher').show(); 

     // Remove the flag 
     localStorage.removeItem('chatWindowOpen'); 
    }); 

    // Open chat window if the flag is there 
    if (localStorage.getItem('chatWindowOpen')) { 
     $('.chat-launcher').trigger('click');  
    }   
});

另外一个音符;正如您可能已经注意到的，您不需要多个$(document).ready()调用。一个人会为所有人做。

来源

2017-01-03 00:26:30 sepehr

保留以前由jquery隐藏的div在重新加载页面上打开

回答

相关问题