2015-11-16 4 views
-1

Im делает простую форму, которая сохраняет информацию в locastorage, она сохраняет информацию один раз, и если вы попробуете еще раз, она сохранит информацию, а заменит старую. Есть ли способ добавить информацию в locastorag без замены старой информации.Как сохранить в localstorage

HTML:

<h2>Entry</h2> 
     <hr><br> 
     <form> 
      <label for="title">Title:<br></label><input type="text" name="title" id="title"><br><br> 
      <label for="comments">Comments:<br></label><textarea cols="40" rows="4" id="comments"></textarea><br> 
      <button type="reset" class="button-class" id="add">Submit</button> <br><br> 
      <a onClick="clearStorage()" style="cursor:pointer"> --> Clear Local Storage <-- </a> 
     </form> 
     <div class="entry"> 

     </div> 

JS:

$(document).ready(function() 
{ 
    $('#add').click(function(e) 
    { 
     e.preventDefault(); 
     var addText = $('input[name=title]').val(); 
     var addComment = $('textarea#comments').val(); 
     $('.entry').append($('<div class="in-ent"><br><h3>Title:</h3><p> ' + addText + '</p><br><h3>Comments:</h3><p> ' + addComment + '<br></p><br></div>')); 
     document.getElementById("title").value = ""; 
     document.getElementById('comments').value = ""; 

     save(addText,addComment); 
    }); 
}); 

function save(addText,addComment) 
{ 
    var addText =addText; 
    var addComment = addComment; 
    var myArrayObject = []; 
    var entry = new Object(); 
    entry.title = addText; 
    entry.comments = addComment; 
    myArrayObject.push(entry); 
    localStorage.setItem("Entry", JSON.stringify(myArrayObject)); 
} 

function clearStorage() { 
    console.log("Clearing local storage."); 
    localStorage.clear(); 
    window.location.href = "index.html"; 
} 

Демо: https://jsfiddle.net/jqj82wks/4/

ответ

0

Вы должны хранить массив вместо простого переменного:

var addText =addText; 
var addComment = addComment; 
var myArrayObject = []; 
var entry = new Object(); 
entry.title = addText; 
entry.comments = addComment; 
myArrayObject.push(entry); 

//First entry when localStorage not exist 
if (localStorage.getItem("Entry") == null) 
{ 
    localStorage.setItem("Entry", JSON.stringify(myArrayObject)); 
}else{ 
    //get array stored in localstorage 
    var entries_array = JSON.parse(localStorage.getItem("Entry")); 

    //Add new entry to the array 
    entries_array.push(entry); 

    //Store array 
    localStorage.setItem("Entry", JSON.stringify(entries_array)); 
} 

console.log(JSON.parse(localStorage.getItem("Entry"))); 
//Output Array of objects 
//[Object, Object, Object] 

Надеется, что это помогает.

1

Нет необходимости в способе набора, просто используйте:

localStorage.lastname = "Smith";

ИЛИ

localStorage["lastname"] = "Smith"

html5 webstorage.

+0

Но я хочу определить название с комментариями, поэтому я могу вести запись записей. – Pedro

+0

Он использует ['.setItem'] (https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem) по какой-то причине. – Blazemonger

+0

@Blazemonger и эта причина есть? – stackoverfloweth

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