Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

}
Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search