Ytukyg

I'm trying to make a comment section using just html, and javascript. I create a new dom element when the user presses post, but when you refresh, obviously it goes away. How can i make it add permanently. I'd like to do this without a database because I've never used one before.

Here is the 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 = "";

}

Short answer: use localStorage.

Create a function with only purpose to add one div based on a value in your comments:

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

};

To manipulate localStorage, you should use getItem and setItem methods like this:

function saveItem(message) {

    var comments = JSON.parse(localStorage.getItem('comments') || '');

    comments.push(message);

    localStorage.setItem('comments', JSON.stringify(comments));

}

Now, update your current function to use those functions above:

function postComment() {

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



    addNewDiv(message);

    saveItem(message);



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

}

All your comments are saved. To load them on F5-refresh, use this script after your HTML has been rendered:

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

You are all done, to clear the localStorage, use:

localStorage.clear();

Or:

localStorage.removeItem('comments');

Hope it helps.

You could use cookies to store the text area data. Hope this helps. The timer below reads the text box every 5 seconds so it will auto store the data.

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;

}