1

I am working on a simple todo list with vanilla JavaScript.

I have succeeded in storing the user's task in local storage and displaying the task on the frontend.

There is a clear task button to remove both tasks from local storage and on the frontend.

It works but not perfectly.

It fails when I do the following:

  1. Add a task
  2. Clear a task
  3. Add a new task and that particular task only appears on the front-end, but on local storage the previous cleared tasks and the new task appears.

If I then reload the browser, the previous task that was cleared both in the frontend and local storage appears both on frontend and local storage.

Please how do I make it work perfectly?

i.e once I clear the task in the local storage, the task does not appear again.

Here is my code below

JavaScript Code snippet

let task = document.querySelector('input'); 

const form = document.querySelector('form');

const ul = document.querySelector('ul');

const clearTask = document.querySelector('#clear');

// A list for task in local storage
const itemsLocal = localStorage.getItem("items") ? JSON.parse(localStorage.getItem("items")) : [];

localStorage.setItem("items", JSON.stringify(itemsLocal))

// convert local storage data to something I can work with in userData variable
const userData = JSON.parse(localStorage.getItem("items"));


// Function to add task
const addTask = (text) => {
// Create li element
const li = document.createElement('li');

// Create text node
li.appendChild(document.createTextNode(text));

ul.appendChild(li);
}

form.addEventListener('submit',(e) => {
    e.preventDefault();

    //  Add user task to local storage
    itemsLocal.push(task.value);  
    localStorage.setItem("items", JSON.stringify(itemsLocal))

    addTask(task.value);   
    
    // Clear input field
    task.value = '';
})


userData.forEach((data)=> {
    addTask(data);
});

clearTask.addEventListener('click', () =>{
    localStorage.removeItem("items");
    userData.length = 0;
    while (ul.firstChild) {
        ul.removeChild(ul.firstChild);
    }
    
})

HTML

<body>
    <form action="">
        <input type="text">
        <button type="submit">Add  Task</button>
    </form>
    <div>
        <ul>
            
        </ul>
    </div>
    <button id="clear">Clear Task</button>
    <script src="main.js"></script>
</body>

P.s I am new a bit new to JavaScript.

2

4 Answers 4

2

In your clearTask event listener you have to also clear your itemsLocal array.

clearTask.addEventListener('click', () =>{
    localStorage.removeItem("items");
    itemsLocal.length = 0; // clear it here... (you got to add this line)
    userData.length = 0;
    while (ul.firstChild) {
        ul.removeChild(ul.firstChild);
    }
});

Currently, since you're not clearing it, you're adding the new value to the array which still contains the old values and are storing it to local storage.

form.addEventListener('submit',(e) => {
    e.preventDefault();

    // 'itemsLocal' still has your old values here and you're just appending to it
    itemsLocal.push(task.value);

    // storing old items and the new one in the local storage here
    localStorage.setItem("items", JSON.stringify(itemsLocal));

    // you're rendering only the currently added item so you get the
    // fake feeling that your list is fine and that local storage has issues
    addTask(task.value);  
    
    // Clear input field
    task.value = '';
});
1
  • just make the user data array empty in the clearTask like this:
clearTask.addEventListener('click', () =>{
    localStorage.removeItem("items");
    itemsLocal = [];
    userData = [];

})
0

elementsList.innerHTML = '' will clear all items in the list.

Below code works perfectly with localStorage and it has one more additional function that can remove individual item.

Html:

<section class="container">
    <h1>TO DO LIST</h1>
    <ul></ul>
    <div class="footer">
        <input type="text" placeholder="Title..." />
        <button class="enter">Enter</button>
    </div>
    <div>
        <button class="clear">
            Clear
        </button>
    </div>
</section>

Script:

const ul = document.querySelector("ul");
const input = document.querySelector("input");
const enterBtn = document.querySelector(".enter");
const clearBtn = document.querySelector(".clear");

const LIST_LS = "lists";
let lists = [];

function saveStorage() {
  localStorage.setItem(LIST_LS, JSON.stringify(lists));
}

function clearStorage() {
  lists = [];
  ul.innerHTML = "";
  saveStorage();
}

function loadStorage() {
  const loadStorage = localStorage.getItem(LIST_LS);

  if (!loadStorage) {
    return;
  }
  const parsedList = JSON.parse(loadStorage);
  parsedList.forEach(list => createItem(list.text));
}

function onAdd() {
  const text = input.value;

  if (!text) {
    return input.focus();
  }
  createItem(text);
  input.value = "";
  input.focus();
}

function createItem(text) {
  const id = lists.length + 1;
  const itemRow = document.createElement("li");
  itemRow.setAttribute("class", "item__row");
  itemRow.innerHTML = `${text} <i class="fas fa-trash-alt" data-id=${
    itemRow.id
  }></i>`;
  itemRow.id = id;

  const delBtn = itemRow.querySelector(".fa-trash-alt");
  delBtn.addEventListener("click", deleteItem);

  ul.appendChild(itemRow);
  lists.push({ text, id });
  saveStorage();
  return itemRow;
}

function deleteItem(event) {
  const trashBtn = event.target;
  const li = trashBtn.parentNode;
  ul.removeChild(li);
  const cleanStorage = lists.filter(toDo => toDo.id !== +li.id);
  lists = cleanStorage;
  saveStorage();
}

function init() {
  loadStorage();

  enterBtn.addEventListener("click", () => onAdd());

  input.addEventListener("keypress", event => {
    if (event.key === "Enter") {
      onAdd();
    }
  });

  clearBtn.addEventListener("click", () => clearStorage());
}

init();

https://codesandbox.io/s/damp-morning-csiny

0

Check this out, I think you might learn from the code:

//<![CDATA[
/* js/external.js */
let get, post, doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, shuffle, rand, Lister; // for use on other loads
addEventListener('load', ()=>{
get = (url, success, context)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  x.send();
}
post = function(url, send, success, context){
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('POST', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    if(send instanceof FormData){
      x.send(send);
    }
    else{
      const fd = new FormData;
      for(let k in send){
        fd.append(k, JSON.stringify(send[k]));
      }
      x.send(fd);
    }
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
hC = function(node, className){
  return node.classList.contains(className);
}
aC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.add(...a);
  return aC;
}
rC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.toggle(...a);
  return tC;
}
shuffle = array=>{
  let a = array.slice(), i = a.length, n, h;
  while(i){
    n = Math.floor(Math.random()*i--); h = a[i]; a[i] = a[n]; a[n] = h;
  }
  return a;
}
rand = (min, max)=>{
  let mn = min, mx = max;
  if(mx === undefined){
    mx = mn; mn = 0;
  }
  return mn+Math.floor(Math.random()*(mx-mn+1));
}
Lister = function(inInput, addButton, outList, clearButton, reverseButton, controlDiv = null){
  const o = localStorage.listObj ? JSON.parse(localStorage.listObj) : {lastFirst:true, list:[]}, la = o.list;
  outList.innerHTML = '';
  this.lastFirst = o.lastFirst;
  this.save = ()=>{
    localStorage.listObj = JSON.stringify(o);
    return this;
  }
  this.createItem = value=>{
    let li = M('li'), x = M('input');
    x.className = 'warn'; x.type = 'button'; x.value = 'REMOVE'; li.textContent = value; li.appendChild(x);
    x.onclick = ()=>{
      for(let i=0,c=outList.children,l=c.length; i<l; i++){
        if(c[i] === li){
          la.splice(i, 1); break;
        }
      }
      outList.removeChild(li);
      if(controlDiv && !outList.hasChildNodes())aC(controlDiv, 'hid');
      this.save();
    }
    return li;
  }
  this.addItem = value=>{
    let v = value.trim();
    if(v !== ''){
      let li = this.createItem(v), fc = outList.firstChild;
      if(this.lastFirst && fc){
        outList.insertBefore(li, fc); la.unshift(v);
      }
      else{
        outList.appendChild(li); la.push(v);
      }
      this.save();
      if(controlDiv)rC(controlDiv, 'hid');
    }
  }
  const addIt = ()=>{
    this.addItem(inInput.value); inInput.value = ''; rC(inInput, 'good');
  }
  addButton.onclick = ()=>{
    addIt();
  }
  inInput.onkeydown = e=>{
    if(e.key === 'Enter')addIt();
  }
  inInput.oninput = function(){
    const f = this.value.trim() === '' ? rC : aC;
    f(this, 'good');
  }
  clearButton.onclick = function(){
    localStorage.removeItem('listObj'); la.splice(0); outList.innerHTML = '';
    if(controlDiv)aC(controlDiv, 'hid');
  }
  this.reverse = ()=>{
    la.reverse(); outList.innerHTML = '';
    la.forEach(v=>{
      outList.appendChild(this.createItem(v));
    });
    o.lastFirst = this.lastFirst = !this.lastFirst; localStorage.listObj = JSON.stringify(o);
  }
  reverseButton.onclick = ()=>{
    this.reverse();
  }
  if(la.length){
    la.forEach(v=>{
      outList.appendChild(this.createItem(v));
    });
  }
  if(controlDiv && outList.hasChildNodes())rC(controlDiv, 'hid');
}
// magic under here
const lister = new Lister(I('input_item'), I('add_item'), I('items'), I('clear'), I('reverse'), I('control'));
}); // end load
//]]>
/* css/external.css */
*{
  box-sizing:border-box; font:22px Tahoma, Geneva, sans-serif; color:#000; padding:0; margin:0; overflow:hidden;
}
html,body,.main{
  width:100%; height:100%;
}
.main{
  background:#333; overflow-y:auto;
}
input[type=text].good{
  border:1px solid #0c0;
}
.hid{
  display:none;
}
#lister{
  padding:10px; background:#aaa;
}
input{
  height:38px; padding:3px 5px;
}
input[type=text]{
  width:calc(100% - 70px); background:#fff; border:1px solid #c00; border-radius:3px;
}
input[type=button]{
  color:#fff; font-weight:bold; border:0; border-radius:5px; cursor:pointer;
}
#add_item{
  width:70px; background:linear-gradient(#679467,#235023);
}
li{
  position:relative; height:32px; background:#ccc; padding:3px 10px; margin:5px;
}
.warn{
  background:linear-gradient(#b75757,#502323); padding:3px 15px;
}
li>.warn{
  position:absolute; right:5px; height:26px; font-size:14px;
}
#control{
  background:#bbb; text-align:center; padding:5px; border:5px solid #ccc;
}
#reverse.warn{
  background:linear-gradient(#1b7bbb,#147);
}
.warn+.warn{
  margin-left:20px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='lister'>
      <input id='input_item' type='text' maxlength='239' /><input id='add_item' type='button' value='ADD' />
      <ul id='items'></ul>
      <div class='hid' id='control'><input class='warn' id='clear' type='button' value='CLEAR' /><input class='warn' id='reverse' type='button' value='REVERSE' /></div>
    </div>
  </div>
</body>
</html>

Of course, localStorage will have to be tested on your Server (maybe localhost), since it's an issue on Stack Overflow. They should add virtual localStorage and sessionStorage to this site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.