CODEWITHSUNDEEP
javascriptlocal-storagehtml-lists
learner
learner

Reputation: 190

values from input box is not saving on localstorage

i have develop a todo app. where user insert some values and it gets save on the screen. now i want to save the values into localstorage.but its not getting saved instead i am getting a empty {}.

here is the javascript code

    //crete element from input box and delete
let knoo = document.getElementById('kno')
let box= document.getElementById('txt')
let sub= document.getElementById('sub').addEventListener('click',()=>{
    let para = document.createElement('ul')

    para.innerText= box.value
    knoo.appendChild(para)
    box.value=''
    localStorage.setItem('key', JSON.stringify(para))

    //styling
    para.addEventListener('click', ()=>{
        para.style.textDecoration = 'line-through'
    })
    //delete
    para.addEventListener('dblclick', ()=>{
        knoo.removeChild(para)
   })
})

here is the html

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>hi</h2>
    <div id="hello">
        <h1>hello</h1>
    </div>
    
    <button id="btn">delete</button> <br>
    <br>
       <input type="text" id="txt">
       <button type="submit" id="sub">+</button>
       <div id="kno"></div>

    <script src="main.js"></script>
</body>
</html>

Upvotes: 3

Views: 633

Answers (1)

James
James

Reputation: 2787

That is because you use JSON.stringify with a html element which will not work and it will always produce {}.

The JSON.stringify() method converts a JavaScript object or value to a JSON string

I solution is to use array to store the value for para and use JSON.stringify for the array

let knoo = document.getElementById('kno')
let box= document.getElementById('txt')
let storedvalue = []
if(localStorage.getItem('key')){
storedvalue = localStorage.getItem('key');
}
let sub= document.getElementById('sub').addEventListener('click',()=>{
    let para = document.createElement('ul')

    para.innerText= box.value
    knoo.appendChild(para)
    box.value=''
    storedvalue.push(para.innerText)
    localStorage.setItem('key', JSON.stringify(storedvalue))

    //styling
    para.addEventListener('click', ()=>{
        para.style.textDecoration = 'line-through'
    })
    //delete
    para.addEventListener('dblclick', ()=>{
        knoo.removeChild(para)
   })
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>hi</h2>
    <div id="hello">
        <h1>hello</h1>
    </div>
    
    <button id="btn">delete</button> <br>
    <br>
       <input type="text" id="txt">
       <button type="submit" id="sub">+</button>
       <div id="kno"></div>

    <script src="main.js"></script>
</body>
</html>

Upvotes: 1

Related Questions