Question

这是我用来在我的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>

Answer 1

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

Answer 2

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

使用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意味着它仅适用于该浏览器上的该用户。如果您希望更多人看到它，您需要使用服务器端解决方案。

动态地在html页面上写

2 个答案: