如何防止动态添加的元素在页面重新加载后消失

How to prevent a dynamically added element from disappearing after page reload.

本文关键字：新加载 加载 消失 添加 动态 何防止 元素      更新时间：2023-09-26

我有以下代码，当我单击提交按钮时，它会在html中生成一个div元素。div元素成功生成，但问题是当我刷新页面时，它会消失，如何使它保持在那里，即使稍后刷新页面。

我的目的是希望用户在我的页面上添加评论。所以我希望评论留在页面上。

<script type="text/javascript">
    function myfunction(){
        var name=document.forms["myform"]["name"].value;
        var comment = document.forms["myform"]["comment"].value;
        var div=document.createElement("div");
        var text=document.createTextNode(name+" commented "+comment);
        div.appendChild(text);
        document.body.appendChild(text);
    }
</script>
<body>
    <form name="myform">
        Name: <input type="text" name="name"/>
        <br>
        Comment: 
        <textarea rows="4" cols="50" name="comment">
        </textarea>
        <input type="button" value="submit" onclick="myfunction()"/>
    </form>

</body>
<div id = "com"></div>

听起来你甚至可能想要这样的东西：

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-simple-web-based-chat-application/

试试这个，我使用的是jquery：http://jsfiddle.net/sVgxa/

HTML:

<textarea id="input"></textarea>
<button id="submit">Enter</button>
<div id="newDivs"></div>

Javascript：

$('#submit').click(function() {
   var text = $('#input').val();
   $('#newDivs').append('<div>' + text + '</div>');
});

如果您想要在不同的用户之间显示一些内容，则需要使用Ajax来实现更复杂的内容。

您可以使用javascript cookie：

Fiddle

html:

<form name="myform">Name:
    <input type="text" name="name" />
    <br>Comment:
    <textarea rows="4" cols="50" name="comment"></textarea>
    <input type="button" value="submit" onclick="myfunction()" />
    <div id="com"></div>
</form>

javascript:

document.addEventListener("DOMContentLoaded", check, false);
function check() {
    if (checkCookie("name")) {
        var name = document.forms["myform"]["name"].value;
        var comment = document.forms["myform"]["comment"].value;
        var div = document.createElement("div");
        var text = document.createTextNode(getCookie("name") + " commented " + getCookie("comment"));
        div.appendChild(text);
        document.body.appendChild(text);
    }
}
function myfunction() {
    var name = document.forms["myform"]["name"].value;
    var comment = document.forms["myform"]["comment"].value;
    var div = document.createElement("div");
    var text = document.createTextNode(name + " commented " + comment);
    div.appendChild(text);
    document.body.appendChild(text);
    if (!checkCookie("name")) {
        setCookie("name", name, 365);
        setCookie("comment", comment, 365);
    }
}
function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1) {
        c_value = null;
    } else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start, c_end));
    }
    return c_value;
}
function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}
function checkCookie(cookie) {
    var flag = getCookie(cookie);
    if (flag != null && flag != "") {
        return true;
    }
    return false;
}
相关文章：