如何在javascript中将新项目存储在localstorage或sessionstorage中？

Question

我对 javascript 真的很陌生，而且完全蹩脚。我正在尝试学习它，但如果您看到我编写的代码，您可能会因为我如何将 html 标签放入innerHTML >:D ...问题而感到震惊。

我想在没有 php 的情况下建立一个聊天（不要问为什么）。

在没有数据库的情况下，我做了一个事情，如果您单击“发送消息”，您的消息只会显示，直到您刷新页面并且我收到一封包含该消息的电子邮件（稍后将其添加到嵌入代码中；是的）这是愚蠢的）。

但是我想将用户的消息存储至少一个会话。我搜索了一段时间并发现了 sessionStorage。 哇，这正是我需要的。但由于我非常糟糕，我仍然得到你放在那里的唯一最后一个输入

如果我没有输入任何内容，比如只在新会话中打开聊天是的，我明白，如果没有数据插入文本框中，我将得到诸如 null 之类的结果...但我看到有些人可以认为，如果没有插入消息，则 null 会隐藏在某处。而且它还可以保存并存储较新的消息。

如果有人能帮助我解决这个问题，我真的会非常感激...因为我是极限初学者...谢谢你们，爱你们！

这是我蹩脚的***代码，请笑一笑，然后帮助我♥

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

如果存储为空，则返回 null of undefined。所以，如果是新的聊天，则需要添加存储不存在的回调函数，如下所示：

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

}

我希望这有帮助:)

Answer 2

我认为您发送的最后一条消息会覆盖您之前在本地存储中发送的消息。为了克服这个问题，您可以将消息作为数组存储在本地或会话存储中，然后迭代它们并在

window.onload()

中渲染消息