using javascript when i ' m iterate localstorage current input value my DOM its Add multiple value or perivous value of localstorage ? code example
Example: using javascript when i ' m iterate localstorage current input value my DOM its Add multiple value or perivous value of localstorage ?
//featch data from form
// class Book{
// constructor(givenNAme , givenAuthor , givenType){
// this.name = givenNAme;
// this.author = givenAuthor;
// this.type = givenType;
// }
// }
// display function
class Display {
// add to UI
add = () =>{
let w = localStorage.getItem('localkey');
if (w == null){
localObj = [] ;
}else{
localObj = JSON.parse(w);
}
let data ;
localObj.forEach((element) => {
data = `<tr>
<td>${element.lname}</td>
<td>${element.lauthor}</td>
<td>${element.ltype}</td>
</tr>`
});
let tablebody = document.getElementById('tablebody');
if (localObj.length > 0 ){
tablebody.innerHTML += data;
} else{
tablebody.innerHTML = `There Is No Book Added Please Add`;
}
}
// clear form
clear = () => {
let myform = document.getElementById('libraryForm');
myform.reset();
}
}
let addBook = document.getElementById('addme');
// create black array
addBook.addEventListener('click', (e) => {
let name = document.getElementById('bookName').value;
let author = document.getElementById('author').value;
let type = '';
if(fiction.checked){
type = fiction.value;
}
else if(programing.checked){
type = programing.value;
}
else if(cooking.checked){
type = cooking.value;
}
let w = localStorage.getItem('localkey');
if (w == null){
localObj = [];
}else{
localObj = JSON.parse(w);
}
let mylocal = {
lname:name,
lauthor:author,
ltype:type
}
console.log(mylocal.lname);
localObj.push(mylocal)
localStorage.setItem('localkey' , JSON.stringify(localObj));
// let myBook = new Book(name, author, type);
// console.log(myBook);
let bookdisplay = new Display();
bookdisplay.add();
bookdisplay.clear();
e.preventDefault();
});
function codeAddress() {
add = () =>{
let w = JSON.parse(localStorage.getItem('localkey'));
w.forEach((element)=>{
let tablebody = document.getElementById('tablebody');
let data = `<tr>
<td>${element.lname}</td>
<td>${element.lauthor}</td>
<td>${element.ltype}</td>
</tr>`
tablebody.innerHTML += data;
});
}
add();
}
window.onload = codeAddress;