-1

这是我用来在我的 html 页面上动态发布一行的代码，问题是当我刷新它时页面变空，我希望该行永久地写在页面上

    <html>
    <br><br>post a question <br>
    <br><br><textarea id="t"></textarea><br>
    <br><br><button id='a'>Post</button>
    <div id='updateDiv'></div>

    <script language= "javascript">
    function displayDate()
    {
    var comment = document.getElementById("t").value;
    var newParagraph = document.createElement('p');
    newParagraph.textContent = comment;
    document.getElementById("updateDiv").appendChild(newParagraph);
    document.getElementById("t").value = "";
    }

    document.getElementById("a").onclick = displayDate;
    </script>
    </html>
4

2 回答 2

3

当您刷新页面时，它会向服务器发出整个页面的新请求。这意味着它会获得一个全新的标记副本，然后再次执行该脚本并添加一个空段落。无法更改浏览器刷新的这种行为。

于 2013-04-01T15:50:54.187 回答
2

您要么需要使用服务器端语言来存储值，要么使用 localstorage 之类的东西。

使用本地存储的示例

(function() {

    var outDiv = document.getElementById("updateDiv");

    function displayDate () {
        var comment = document.getElementById("t").value;
        var newParagraph = document.createElement('p');
        newParagraph.textContent = comment;
        outDiv.appendChild(newParagraph);
        localStorage.setItem("data", outDiv.innerHTML);
        document.getElementById("t").value = "";
    }

    document.getElementById("a").onclick = displayDate;
    var str = localStorage.getItem("data");
    if (str) {
        outDiv.innerHTML = str;
    }

})();

JSFiddle

请记住，使用 localstorage 意味着它仅适用于该浏览器上的该用户。如果您希望更多人看到它，则需要使用服务器端解决方案。

于 2013-04-01T16:01:52.010 回答