Question

我有以下代码，当我点击提交按钮时，它会在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>

Answer 1

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

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更复杂的东西。

Answer 2

您可以使用javascript cookies：

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;
}

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

2 个答案: