如何在JavaScript中将新项目存储在localstorage或sessionstorage中?

hrysbysz  于 5个月前  发布在  Java
关注(0)|答案(3)|浏览(73)

我真的是新的和总跛脚的JavaScript.我试图学习它,但如果你会看到我做的代码,你可能会facepalm自己,因为我如何把html标签在innerHTML >:D**无论如何.

我想建立一个聊天没有php(不要问为什么)。

没有数据库,我做了一件事,如果你点击“发送消息”,你的消息只会显示,直到你刷新页面,我得到一封电子邮件的消息(稍后添加到嵌入代码;是的,这是愚蠢的)。
Here is an working example without local or sessionstorage (screenshot)
Here is a code without implemented the storage function(screenshot)
然而,我想存储来自用户的消息至少一个会话.我搜索了一段时间,发现sessionStorage.哇,这正是我需要的.但由于我非常糟糕,我仍然得到你放在那里的唯一一个最后输入

as you can see on this image here...

如果我没有输入任何东西,比如只在新会话上打开聊天**I am getting the "null" message.**是的,我明白如果没有数据插入到文本框中,我会得到一个结果,如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>";

}

字符串

sg24os4d

sg24os4d1#

如果存储空间为空,则返回null或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>";

}

字符串
我希望这对你有帮助:)

bfrts1fy

bfrts1fy2#

我认为你发送的最后一条消息覆盖了你在本地存储中之前发送的消息。为了克服这个问题,你可以将消息作为数组存储在本地或会话存储中,然后将它们覆盖,并在window.onload()中呈现消息。

kiz8lqtg

kiz8lqtg3#

伙计们,不知何故,我修复了它在最愚蠢的方式,但它是工作:D我只是把更多的ID和创建隐藏的输入值充满我的html div类哈哈:D这是如此愚蠢,但它是工作?

我只是想感谢你们所有人的帮助和解决方案,但可悲的是,我是新手,即使我知道你的方法是工作,我仍然不能理解他们。
但是我给你看代码是为了好玩,我有多笨: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>

字符串
这里的JS代码:

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


再次感谢您的帮助!:)这个帖子现在已经解决了!:)顺便说一句。我试图把.querySelectorAll("#input, #input2", #input3");
而不是手动.getElementById,但不知何故,它没有工作:/

相关问题