0
173
ViewsData from Local Storage appending to HTML
My local storage is now working fine: it's storing the data on a single key.
However, when I'm trying to append the data on HTML I'm getting this output on appending. Please see the image below.
Also, you can see my code here. I really appreciate your help guys. Step by step I'm now understanding the localStorage, but I'm having a road block in this one can anyone help me thanks in advance.
https://jsfiddle.net/ricobenviaje11/rp8kqtd9/12/
$("document").ready(function(){
var iDataHandler = [];
$(".save").on("click", function() {
if(typeof(Storage) !== "undefined") {
if(localStorage.getItem('iDataHandler') && localStorage.getItem('iDataHandler').length > 0)
iDataHandler = JSON.parse(localStorage.getItem('iDataHandler'));
DataHandler = {
'title': $("#txtbox-1").val(),
'para': $("#txtbox-2").val(),
'para1': $("#txtbox-3").val(),
};
iDataHandler.push(DataHandler);
localStorage.setItem('iDataHandler', JSON.stringify(iDataHandler));
}
// appending data
for (var i = 0; i < Object.keys(iDataHandler).length; i++) {
Object.keys(iDataHandler)[i]
$('.sNote').append(
'<div class="list-item" data-postid"'+Object.keys(iDataHandler)[i]+'">'+iDataHandler[(Object.keys(iDataHandler)[i])]+
'</div><div class="close"><i class="fas fa-times"></i></div>'
);
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="" id="txtbox-1">
<input type="text" name="" id="txtbox-2">
<input type="text" name="" id="txtbox-3">
<div class="save">
Save
</div>
<div class="sNote"></div>
·
Juan Pablo Isaza
1 answers
Answer question0
You must put this where you append data to list-item
// appending data
for (var i = 0; i < Object.keys(iDataHandler).length; i++) {
$('.sNote').append(
'<div class="list-item" data-postid"'+JSON.stringify(iDataHandler[(Object.keys(iDataHandler)[i])])+
'</div><div class="close"><i class="fas fa-times"></i></div>'
);
}
·
Juan Pablo Isaza
Report
Answer question