javascript - 替换现有内容=本地存​​储+现有内容。 JavaScript、网络存储、本地存储

标签 javascript html local-storage web-storage

嗯,我试图将“textBox”中的消息保存回 localStorage 并将其添加到“logContent”前面,但是当我刷新页面时,“logContent”仍然为空,仅存在原始内容。

<body>

<div class="modal-body"> 
    <input id="textBox" type="text" placeholder="Type Message" onkeydown="if (event.keyCode == 13) {enterPressed();}">
    <p id="logContent">
            -- Logging is created --
    </p>
</div>

</body>

这是我的Javascript,所以我想用 textBox.value + logContent 中的原始内容替换“logContent”中的原始内容,并始终显示所有内容,即使您刷新页面也是如此。谢谢。

var today = new Date(); 
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0
var yyyy = today.getFullYear();

if (dd < 10) {
dd ='0'+ dd
} 

if (mm < 10) {
mm ='0'+ mm
} 

today = dd + '/' + mm + '/' + yyyy;

function enterPressed() {
localStorage.setItem("logs", document.getElementById("textBox").value);
if (textBox.value == "") {

}
else {
var logText = today + ":" + " " + localStorage.getItem("logs") + '<br>';
$("#logContent").prepend(logText); // Prepend textBox's content to the top of  "logContent".
textBox.value = ""; // To clear the textBox after enter is pressed.
}
}

最佳答案

原始脚本没有提供从localStorage加载日志的方法,并将新输入存储在“logs”键下,而目的是预先添加。解决方案非常简单:在页面加载时从 localStorage 加载,并使用页面上显示的 logContents 内容覆盖 localStorage['logs']

....

window.onload = function(){
    existing_log = localStorage.getItem("logs");
    console.log(existing_log);
    if (existing_log){document.getElementById("logContent").innerHTML = existing_log;}
}

function enterPressed() {
    if (textBox.value == "") {
        return;
    }
    else {
        var logText = today + ":" + " " + document.getElementById("textBox").value + '<br>\n';
        $("#logContent").prepend(logText); // Prepend textBox's content to the top of  "logContent".
        textBox.value = ""; // To clear the textBox after enter is pressed.
        localStorage.setItem("logs", document.getElementById("logContent").innerHTML);
    }
}

关于javascript - 替换现有内容=本地存​​储+现有内容。 JavaScript、网络存储、本地存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18027766/

相关文章:

javascript - ECMAScript 对构造函数参数属性的建议

javascript - 在将新项目添加到数据库后,如何使用 React hooks 更新 React 中的组件?

javascript - <th> 使用 javascript 更改点击背景

css - 如何在另一个div中 float 4个div

Javascript变量范围和对象作为参数传递给函数

php - 如何使 HTML5 与 DOMDocument 一起工作?

javascript - 从 QUnit 调用时,调用 trigger() 并不总是触发

Javascript - 保存地理位置坐标

javascript - Onclick更改HTML5本地存储值

javascript - "Resend"一个 Angular $http 请求