2013-08-02 2 views
1

Я пытаюсь сохранить сообщения в «textBox» обратно в localStorage и добавить его к «logContent», но когда я обновил страницу, «logContent» по-прежнему пуст, но существует только оригинальный контент.Замените существующий контент = локальное хранилище + существующий контент. Javascript, WebStorage, LocalStorage

<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, поэтому я хочу, чтобы заменить исходное содержание в «logContent» с textBox.value + оригинальным контентом в 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. 
} 
} 
+0

Кто-нибудь? Пожалуйста, ... :( –

ответ

0

Оригинальный сценарий не обеспечивает средства для загрузки бревен из localStorage и хранить новый вход под ключ «бревен», в то время как целью было предварять. Решение довольно простое: загрузка из localStorage при загрузке страницы и перезапись localStorage['logs'] с содержимым logContents, как показано на странице.

.... 

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); 
    } 
} 
+0

Большое вам спасибо, это именно то, что я хочу. –

+0

Рад, что я мог бы помочь! Если вы собираетесь делать это чаще всего, вам может понадобиться посмотреть на структуру привязки данных, такую как [AngularJS] (http://angularjs.org/). Угловые хорошо интегрируются с localStorage (https://github.com/gsklee/ngStorage), но аналогичные схемы предлагают аналогичные решения. – AliOli

Смежные вопросы