how to store input in local storage

Question

Please help me to store the input in the local storage.

var ul = document.getElementById('list');
var li;

var addButton = document.getElementById('add');
addButton.addEventListener('click', addItem);

var removeButton = document.getElementById('remove');
removeButton.addEventListener('click', removeItem)





function addItem() {
  //console.log("Add button clicked");
  var input = document.getElementById('input');
  var item = input.value;
  ul = document.getElementById('list');
  var textnode = document.createTextNode(item)
  localStorage.setItem('addItem', '');
  console.log(localStorage.getItem('addItem'));

  if (item === '') {
    return false;
    //add a p tag and assign a value of "enter yor todo"

  } else {
    //create li
    li = document.createElement('li');
    //create checkbox
    var checkbox = document.createElement('input')
    checkbox.type = 'checkbox';
    checkbox.setAttribute('id', 'check');
    //create label
    var label = document.createElement('label');
    label.setAttribute('for', 'item') //optional
    //add these elements on web page
    ul.appendChild(label);
    li.appendChild(checkbox);
    label.appendChild(textnode);
    li.appendChild(label);
    ul.insertBefore(li, ul.childNodes[0]);
    setTimeout(() => {
      li.className = 'visual';
    }, 2);
    input.value = '';
  }
}

function removeItem() {
  li = ul.children
  for (let index = 0; index < li.length; index++) {
    while (li[index] && li[index].children[0].checked) {
      ul.removeChild(li[index])
    }


  }

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Simple todo Apllication</title>
</head>

<body>
  <div id="container">
    <div class="controls">
      <h1>My Awesome TODO</h1>
      <input type="text" id="input"><br>
      <button type="button" id="add">ADD TODO</button>
      <button type="button" id="remove">Remove TODO</button>

    </div>
    <ul id="list">
      <li class="mycheck">
        <input type="checkbox" id="check"><label>Go to Gym</label>
      </li>
      <li class="mycheck">
        <input type="checkbox" id="check" checked><label>Record youtube video</label>
      </li>
      <li class="mycheck">
        <input type="checkbox" id="check" checked><label>Record youtube video</label>
      </li>
      <li class="mycheck">
        <input type="checkbox" id="check" checked><label>Record youtube video</label>
      </li>
      <li class="mycheck">
        <input type="checkbox" id="check" checked><label>Record youtube video</label>
      </li>
    </ul>

  </div>
  <script src="todo.js"></script>

</body>

</html>

Please explain your specific use case. You included the code which is a good thing as we can check it to what is going wrong but you need to explain what is the expected behaviour. — Aayush Sharma, Aug 27 '18 at 05:43
What kind of data do you want to store in local storage? You need to write more in detail about what you need. — Alona, Aug 27 '18 at 05:45
Possible duplicate of [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — , Aug 27 '18 at 06:02

score 0 · Answer 1 · answered Aug 27 '18 at 05:40

To store data in local storage, you can use the localStorage.setItem method. It takes 2 parameters. The first one is the keyName, i.e, the name with which data will be stored. The second one is keyValue which is the value that is stored in storage.

You can read more about it here.

The following code stores a sample TODO in the local storage.

localStorage.setItem("sampleTodo", JSON.stringify({"title": "sample", "description": "It is a sample Todo", "completed": false}));

Note that to store a JSON object, I used JSON.stringify.

score 0 · Answer 2 · answered Aug 27 '18 at 05:50

0

You can simply do this

localStorage.keyName = 'value';

answered Aug 27 '18 at 05:50

Ravi kant

89
5

score 0 · Answer 3 · answered Aug 27 '18 at 05:59

0

You can use local storage like this:

// Store
localStorage.setItem("key", "value");
// Retrieve
value = localStorage.getItem("key");

Reference: https://www.w3schools.com/htmL/html5_webstorage.asp

answered Aug 27 '18 at 05:59

how to store input in local storage

3 Answers3