How to store new items in localstorage or sessionstorage in javascript?

Question

I am really new and total lame in javascript. I am trying to learn it but if you will see the code I made you'll probably facepalm yourself because of how I put html tags in the innerHTML >:D anyway... to the problem.

I would like to built a chat without php (don't ask why).

Without database I made a thing that if you click "send message" your message will only show until you refresh the page and I get an e-mail with the message (for later to add it inside the embed code; yes it is dumb).

Here is an working example without local or sessionstorage (screenshot)

Here is a code without implemented the storage function(screenshot)

However I would like to store the message from the user for at least one session. I was searching for some time and discover the sessionStorage. Wow that is exactly what I needed. But as I am extremely bad I am still getting the only one last input you put there

as you can see on this image here...

And if I am not typing anything, like only open the chat on a new session I am getting the "null" message. Yes I understand that if there is no data inserted into a textbox I will get a result such as null... But I saw some people can make it that if there was no message inserted the null was hidden somewhere. And also that it can save newer messages aswell and store them.

I would really be extremely thankful if someone can help me to figure this out... As I am extreme beginner... thank you guys, love you!

Here is my lame *** code so take a laugh and then help me please ♥

var storeditem = localStorage.getItem("storeditem");

function pridat() {
                    
                    var item = document.sample.message.value;
                    var msg = document.sample.message.value;
    
                    var obal = document.createElement('div');
                    obal.setAttribute("class", "you");
    
                    var tr = obal.appendChild(document.createElement('div'));
                    tr.setAttribute("class", "message");
    
                    var td1 = tr.appendChild(document.createElement('div'));
                    td1.setAttribute("class", "text");
                    td1.textContent=msg;
                    localStorage.setItem("storeditem", item);
                    document.getElementById("chat").appendChild(obal);

                }

window.onload = function get(){
localStorage.getItem("storeditem");

document.getElementById("chat").innerHTML = "<div class='message'><p class='text'>hey</p>
</div><div class='time'>13:28</div><div class='you'><div class='message'>
<p class='text'>" + storeditem + "</p></div></div>";

}

Answer 1

It returns null of undefined if the storage is empty. So, you will need to add a call back function if the storage doesn't exist if it is a new chat like this:

var storeditem = localStorage.getItem("storeditem") || (function() {
  //add here the code you want for a new chat for example a welcome message
  return "This is the start of the chat";
})();

function pridat() {
    var item = document.sample.message.value;
    var msg = document.sample.message.value;
    var obal = document.createElement('div');
    obal.setAttribute("class", "you");
    
    var tr = obal.appendChild(document.createElement('div'));
    tr.setAttribute("class", "message");
    var td1 = tr.appendChild(document.createElement('div'));
    td1.setAttribute("class", "text");
    td1.textContent=msg;
    localStorage.setItem("storeditem", item);
    document.getElementById("chat").appendChild(obal);
}

window.onload = function get(){
localStorage.getItem("storeditem");

document.getElementById("chat").innerHTML = "<div class='message'><p class='text'>hey</p>
</div><div class='time'>13:28</div><div class='you'><div class='message'>
<p class='text'>" + storeditem + "</p></div></div>";

}

I hope this helped:)

Answer 2

I think you that the last message u sent overrides the message u send before in the localstorage. To overcome this you could store the messages as an array in local or session storage and iterate over them and render the messages in window.onload()

Answer 3

GUYS somehow I fixed it in the most dumbest way, but it is working :D I just put more IDs and create hidden input with value full of my html div classes ahaha :D it is so dumb but It is working ♥

I just wanted to thank you all for your help and solutions but sadly I am newbie and even tho I know your methods are working, I still can not understand them.

But I am showing you the code for fun how dumb I am :D :D

<input id="input" type="hidden" value="<div class='ochranaodpoved'><div class='spravickaty'><p class='textspravyty'>"/>
<textarea id="input2" name="message" placeholder="Write your message" rows="2" cols="35" style="resize: none; font-family:font1; font-size:15px;"></textarea>
<input id="input3" type="hidden" value="</p></div></div>" />
<button onclick="add()"> Send </button>

And the JS code here:

function add() {
  var new_data = document.getElementById('input').value +
    document.getElementById('input2').value +
    document.getElementById('input3').value;

  if (sessionStorage.getItem('tabulka') == null) {
    sessionStorage.setItem('tabulka', '[]');
  }

  var old_data = JSON.parse(sessionStorage.getItem('tabulka'));
  old_data.push(new_data);

  sessionStorage.setItem('tabulka', JSON.stringify(old_data));
  document.getElementById('chat').innerHTML = JSON.parse(sessionStorage.getItem('tabulka'));
}

function view() {
  if (sessionStorage.getItem('tabulka') != null) {
    document.getElementById('cet2').innerHTML = JSON.parse(sessionStorage.getItem('tabulka'));
  }
}

Once again, thank you for your help! :) this post is now solved! :) Btw. I was trying to put .querySelectorAll("#input, #input2", #input3");
Instead of manually .getElementById but somehow it didn't work :/