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

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

来源

2013-11-22 user1854373

在页面加载，你必须到m确保您正在加载页面加载之前输入的所有注释。所以在页面加载时应该有一个Ajax调用来加载服务器的所有评论。 –

但是我没有在服务器上存储注释，请您详细说明一下 – user1854373

您需要将注释存储在带有后端脚本系统的数据库中。您的脚本所做的就是编辑本地客户端的HTML DOM。你知道JavaScript以外的其他语言吗？ PHP，Ruby等？你如何托管你的网站？ – sbking

听起来像是你甚至可能想是这样的：

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。

来源

2013-11-22 05:24:39 Supplement

感谢大家的快速回复。是的，我确实认为他们需要存储在某个数据库的某处。我知道这在Java中，但我使用www.unichost.com的cPanel托管。我的计划不支持Java。我从来没有读过PHP/CGI。你能指导吗？ – user1854373

“补充”，你的观点是正确的，它正确显示输入的文本，但我希望文本留在进一步的后续页面访问/刷新。目前我不在任何地方存储评论，只是打印，但我需要帮助以某种方式存储和访问。 – user1854373

太棒了，你可能会从上面发布的链接中获得最大的好处。这就是你将如何在发布和刷新后在页面上保留你的评论。 – Supplement

您可以使用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; 
}

来源

2013-11-22 05:35:19

Vicky，我想你在用户添加评论时提到了它，我们将评论和他的名字以cookie的形式存储在用户的浏览器中。在随后的运行中，我们只是从cookie中检索它们。但我的观点是，第一次访问该页面的其他用户将能够查看评论，因为不会为他发送cookie。 – user1854373

我想你在你的问题中提到它 –

要做到这一点，你必须执行补充的答案 –

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

回答

相关问题