在刷新时保持 html dom 操作

Question

我正在尝试仅使用 html 和 javascript 创建评论部分。当用户按下 post 时，我创建了一个新的 dom 元素，但是当您刷新时，它显然消失了。我怎样才能让它永久添加。我想在没有数据库的情况下执行此操作，因为我以前从未使用过。

这是 html:

<form class="commentForm">
    <textarea name="comment" id="comment" rows="6" cols="50" required="required"></textarea><br>
    <button type="button" class="btn btn-dark btn-submit" style="margin-right: 25%;" onclick="postComment()">Post</button>
</form>

JS:

function postComment() {
    var message = document.getElementById("comment").value;
    var div = document.createElement("div");
    div.style.width = "500px";
    div.style.height = "50px";
    div.style.color = "black";
    div.innerHTML = message;

    document.getElementById("comments").appendChild(div);

    document.getElementById("comment").value = "";
}

Answer 1

简答：使用localStorage。

创建一个仅用于根据您评论中的值添加一个 div 的函数：

function addNewDiv (message) {
    var div = document.createElement('div');
    div.style.width = '500px';
    div.style.height = '50px';
    div.style.color = 'black';
    div.innerHTML = message;
    document.getElementById('comments').appendChild(div);
};

要操作 localStorage，您应该使用 getItem 和 setItem 方法，如下所示：

function saveItem(message) {
    var comments = JSON.parse(localStorage.getItem('comments') || '[]');
    comments.push(message);
    localStorage.setItem('comments', JSON.stringify(comments));
}

现在，更新您当前的函数以使用上面的那些函数：

function postComment() {
    var message = document.getElementById('comment').value;

    addNewDiv(message);
    saveItem(message);

    document.getElementById('comment').value = '';
}

您的所有评论都已保存。要在 F5 刷新时加载它们，请在呈现 HTML 后使用此脚本：

JSON.parse(localStorage.getItem('comments') || '[]').forEach(addNewDiv);

大功告成，清除localStorage，使用：

localStorage.clear();

或：

localStorage.removeItem('comments');

希望对您有所帮助。

Answer 2

您可以使用 cookie 来存储文本区域数据。希望这可以帮助。下面的计时器每 5 秒读取一次文本框，因此它会自动存储数据。

setInterval(timer, 5000);

var com = document.getElementById("comment");

function timer() {
    var text = com.innerHTML;
    document.cookie = "text_area="+text;
}

window.onload = function(){
    if(readCookie("text_area")){
      com.innerHTML = readCookie("text_area");
    }
}

//Read cookies reads all cookies and returns the value from name variable

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

在刷新时保持 html dom 操作

Keep html dom manipulation on refresh

html

javascript

dom-manipulation