页面加载聊天窗口的存储状态

Question

我正在制作一个聊天应用程序，其中我的聊天窗口可以打开或折叠。所以我想做的是我想存储这些聊天窗口的状态，无论它们是打开还是折叠。在页面刷新时，应该保持状态。可以使用 cookie 或会话来完成，但我不知道如何做到这一点。如何使用 cookie 或会话存储这些 div 的状态。这是我的 jquery 代码。

$(document).ready(function(){




        $(".shout_msg").click(function(){

            var id = $(this).attr('id');
            var name = $(this).text();
            //var myarray = [];
            var sender = "<?php echo $user_check?>";
            var receiver = name;

            var detect = detectClick(id);

            if(!detect){
                $('#chatboxcontainer').append("<div id = 'd-"+id+"' class = 'shout_box1'></div>");
                $("#d-"+id).append("<div id = 'h-"+id+"' class = 'header1'>'"+name+"'</div>");
                $("#h-"+id).append("<div id = 'c-"+id+"' onclick = 'Slide("+id+")' class='close_btn1'>&nbsp;</div>")
                $("#d-"+id).append("<div id = 't-"+id+"' class = 'toggle_chat1'></div>");
                $("#t-"+id).append("<div id = 'm-"+id+"' class = 'message_box1'></div>");
                $("#t-"+id).append("<div id = 'u-"+id+"' class = 'user_info1'></div>");
                $("#u-"+id).append('<input name = "shout_message" id = "s-'+id+'" type = "text" placeholder = "Type Message Hit Enter" />');

                //alert(id);


                $.ajax({

                            url: "loadmessage.php",
                            type: "POST",
                            data:{
                                'sender': sender,
                                'receiver': receiver,
                            },

                            success: function(response){
                                var result = JSON.parse(response);
                                console.log("Result is " +result);
                                console.log()

                                for(var i in result){
                                    $("#m-"+id).append('<p class = "shout_msg">' +result[i]+ '</p>');
                                    $("#m-"+id).scrollTop($("#m-"+id)[0].scrollHeight);
                                }
                            }
                        });
                }




            $("#s-"+id).keypress(function(evt) {
                if(evt.which == 13) {

                    var msg = $("#s-"+id).val();
                    //msg = msg.replace(":)","<img src = 'smilenew.gif'/>");

                    var dt = new Date();
                    var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

                    $("#m-"+id).append('<p class = "shout_msg" id = "'+count+'">'+sender+':'+msg+'<span class = "time">'+time+'</span></p>');

                    $.ajax({

                        url: "insertdatanew.php",
                        type: "POST",
                        data:{
                            'sender': sender,
                            'receiver': receiver,
                            'msg': msg,
                            'time': time
                        },

                        success: function(result){
                            if(result == 'Y')
                            alert("Successful insertion");
                        }
                    });


                    $("#m-"+id).scrollTop($("#m-"+id)[0].scrollHeight);
                    //count++;
                    $("#s-"+id).val("");


                }

            });

        });



    });

我的代码会是什么样子？

Answer 1

如果您不需要支持较旧的浏览器（尤其是 IE7 或更早版本），那么sessionStorage 非常适合此类事情。下面的链接甚至提供了一个非常接近您正在寻找的示例。

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#sessionStorage

例子：

// set the state
sessionStorage.setItem('chatWindowState', 'closed'); // or 'open'

// retrieve the state when the page loads
var chatWindowState = sessionStorage.getItem('chatWindowState');