Jquery 在页面刷新时保留动态创建的div

我正在制作一个聊天应用程序，其中一个用户与多个用户聊天。我动态创建了多个聊天窗口。i、 e当用户点击在线用户时，会打开一个新的聊天窗口，但我遇到了一个问题，在页面刷新时，动态创建的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 a online user is clicked multiple times only chat window should be opened

            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 = 'h2-"+id+"' class = 'header2'>Clear Conversation</div>");
                $("#h2-"+id).append("<div id = 'c2-"+id+"' onclick = \"Remove("+id+",'"+name+"')\" class='clear_btn1'>&nbsp;</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);
                                }
                            }
                        });

                }
                else{
                    $("#s-"+id).focus();
                }




            $("#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("");


                }

            });

        });



    });

$（文档）.ready（函数（）{
$（“.shout_msg”）。单击（函数（）{
var id=$（this.attr（'id'）；
var name=$（this.text（）；
//var myarray=[]；
var sender=“”；
var接收器=名称；
var detect=detectClick（id）；//如果在线用户被多次单击，则只应打开聊天窗口
如果（！检测）{
$（'#chatboxcontainer'）。追加（“”）；
$（“#d-”+id）。追加（““+name+”）；
$（“#h-”+id）；
$（“#d-”+id）；
$（“#t-”+id）.append（“清晰对话”）；
$（“#h2-”+id）；
$（“#t-”+id）；
$（“#t-”+id）；
$（“#u-”+id）。附加（“”）；
//警报（id）；
$.ajax({
url:“loadmessage.php”，
类型：“POST”，
数据：{
“发件人”：发件人，
“接收者”：接收者，
},
成功：功能（响应）{
var result=JSON.parse（响应）；
console.log（“结果为”+结果）；
console.log（）
for（结果中的var i）{
$（“#m-”+id）.append（'
'+result[i]+'
'）；
$（“#m-”+id）.scrollTop（$（“#m-”+id）[0]。scrollHeight）；
}
}
});
}
否则{
$（“#s-”+id）.focus（）；
}
$（“#s-”+id）.按键（功能（evt）{
如果（evt.which==13）{
var msg=$（“#s-”+id）.val（）；
//msg=msg.replace（“：）”，“）；
var dt=新日期（）；
var time=dt.getHours（）+“：”+dt.getMinutes（）+“：”+dt.getSeconds（）；
$（“#m-”+id）.append（“
“+sender+”：“+msg+”+time+”
”）；
$.ajax({
url:“insertdatanew.php”，
类型：“POST”，
数据：{
“发件人”：发件人，
“接收者”：接收者，
“msg”：msg，
“时间”：时间
},
成功：功能（结果）{
如果（结果='Y'）
警报（“成功插入”）；
}
});
$（“#m-”+id）.scrollTop（$（“#m-”+id）[0]。scrollHeight）；
//计数++；
$（“#s-”+id）.val（“”）；
}
});
});
});

下面是html代码

    <html>
      <body>
        <div id = "chatboxcontainer">
        </div>
      </body>
   </html>

---

如果您正在使用PHP构建页面，请为每个用户创建一个会话，并将用户数据保存在某个位置，这样当他们创建新窗口时，PHP会自动填充任何额外的div