Javascript 刷新时保持html dom操作

我正在尝试使用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>

---

简短回答：使用

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

要操作本地存储，您应该使用如下方法：

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.clear();

或：

---

希望有帮助。

您可以使用cookies存储文本区域数据。希望这有帮助。下面的计时器每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;
}

setInterval（定时器，5000）；
var com=document.getElementById（“注释”）；
函数计时器（）{
var text=com.innerHTML；
document.cookie=“text\u area=“+text；
}
window.onload=函数（）{
if（readCookie（“文本区域”））{
com.innerHTML=readCookie（“文本区域”）；
}
}
//读取cookies读取所有cookies并从name变量返回值
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i你可以考虑使用它，但是实际上Db/session服务器端是正确的去路。任何本地解决方案，如Cookie或LoalStand，只能对个人可见——而不是所有的用户。你可以像每个人所说的那样使用本地存储，但是为什么不在服务器端这样做呢？我知道这是一个注释示例，应该由其他人查看。这听起来可能很愚蠢，但我在哪里调用postComment函数呢。这一切是怎么联系在一起的？没关系，我知道了。谢谢
localStorage.removeItem('comments');

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