Javascript 如何在访问网站的不同页面时保持聊天弹出窗口打开？

我有一个在网站前端定义的聊天弹出窗口。这是我直接使用聊天弹出窗口源代码的链接

函数openForm（）{ document.getElementById（“myForm”）.style.display=“block”； } 函数closeForm（）{ document.getElementById（“myForm”）.style.display=“无”； }

聊天
消息
发送
接近

设置

本地存储

并使其处于您的if状态

 function openForm() {
      localStorage.setItem("chatVisible", "True");
      document.getElementById("myForm").style.display = "block";
    }

    function closeForm() {
      localStorage.setItem("chatVisible", "False");
      document.getElementById("myForm").style.display = "none";
    }

在页面加载中使用

localStorage.getitem

var chat = localStorage.getItem("chatVisible");
if(chat == "True")
 {
   $(".chot-popup").show();
 }
 else{
   $(".chot-popup").hide();
 }

---

我确实复制了您教程中的聊天弹出样式：

我所做的是添加一个

localStorage

来检查每个页面中的聊天框是否打开，然后在

localStorage

值的函数中显示它

本地存储的文档编制

：

您也可以使用cookie，以下是它的文档：

函数openForm（）{ //setItem（“isChatOpen”，true）； document.getElementById（“myForm”）.style.display=“block”； } 函数closeForm（）{ //setItem（“isChatOpen”，false）； document.getElementById（“myForm”）.style.display=“无”； } /*if（localStorage.getItem（“isChatOpen”）==true）{ document.getElementById（“myForm”）.style.display=“block”； }否则{ document.getElementById（“myForm”）.style.display=“无”； }*/

/*用于打开聊天表单的按钮-固定在页面底部*/
.打开按钮{
背景色：#555；
颜色：白色；
填充：16px 20px；
边界：无；
光标：指针；
不透明度：0.8；
位置：固定；
底部：23px；
右：28px；
宽度：280px；
}
/*弹出聊天窗口-默认情况下隐藏*/
.聊天弹出窗口{
显示：无；
位置：固定；
底部：0；
右：15px；
边框：3px实心#f1f1；
z指数：9；
}
/*将样式添加到表单容器*/
.表格容器{
最大宽度：300px；
填充：10px；
背景色：白色；
}
/*全宽文本区*/
.表单容器文本区域{
宽度：100%；
填充：15px；
利润率：5px0.22px0；
边界：无；
背景#f1f1；
调整大小：无；
最小高度：200px；
}
/*当文本区域获得焦点时，做点什么*/
.form container文本区域：焦点{
背景色：#ddd；
大纲：无；
}
/*设置提交/发送按钮的样式*/
.formcontainer.btn{
背景色：#4CAF50；
颜色：白色；
填充：16px 20px；
边界：无；
光标：指针；
宽度：100%；
边缘底部：10px；
不透明度：0.8；
}
/*向“取消”按钮添加红色背景色*/
.表格容器.取消{
背景色：红色；
}
/*向按钮添加一些悬停效果*/
.form container.btn:hover、.open按钮：hover{
不透明度：1；
}

聊天
聊天
消息
发送
接近

除非你有一个单页应用程序，否则你不能。否则，您需要在每次新页面加载时初始化聊天应用程序，并在服务器或LocalStorages上实现一些状态保存。您可以获取cookie或会话，或者使用带有JavaScript的localStorage，例如：

localStorage.setItem（'isChatOpen'，）

并在每个页面上使用JavaScript检查：

localStorage.getItem（'isChatOpen'）

。在

isChatOpen

值的功能中，显示或不显示聊天框。@AshokKumar

localStorage

的文档：告诉我它是否有效，如果有效，我将把它作为答案提交给未来的读者。很高兴它确实帮助了你。谷歌搜索js和cookies可能有助于找到：）我真的很抱歉，我很晚才接受这个答案，但我参与了其他任务，因此无法实现你的解决方案。但现在我已经实现了你的想法，它起了作用flawlessly@UdhayTitusSame乌德海提图斯早于你们提出这个想法，所以我我不得不接受他的解决方案作为答案。非常感谢你花时间来解决我的问题@竹