Question 177023 in Html Question posted in
Some basic documentation can be found here.

How do I retrieve a local storage value in JavaScript using HTML?

I am able to create list, edit list and delete list. I also created localstorage in the function, however when I press refresh in the browser the lists are gone( which means I couldn’t retrieve the list). I want the list to stay even after i close the browser.

window.addEventListener('load', () => {
  const form = document.querySelector("#new-task-form");
  const input = document.querySelector("#new-task-input");
  const list_el = document.querySelector("#tasks");

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

    const task = input.value;

    const task_el = document.createElement('div');
    task_el.classList.add('task');

    const task_content_el = document.createElement('div');
    task_content_el.classList.add('content');

    task_el.appendChild(task_content_el);

    const task_input_el = document.createElement('input');
    task_input_el.classList.add('text');
    task_input_el.type = 'text';
    task_input_el.value = task;
    task_input_el.setAttribute('readonly', 'readonly');

    task_content_el.appendChild(task_input_el);

    const task_actions_el = document.createElement('div');
    task_actions_el.classList.add('actions');
    localStorage.setItem('tasks', JSON.stringify(task))

    const storedTask = JSON.parse(localStorage.getItem('tasks'));

    const task_edit_el = document.createElement('button');
    task_edit_el.classList.add('edit');
    task_edit_el.innerText = 'Edit';

    const task_delete_el = document.createElement('button');
    task_delete_el.classList.add('delete');
    task_delete_el.innerText = 'Delete';

    task_actions_el.appendChild(task_edit_el);
    task_actions_el.appendChild(task_delete_el);

    task_el.appendChild(task_actions_el);

    list_el.appendChild(task_el);

    input.value = '';

    task_edit_el.addEventListener('click', (e) => {
      if (task_edit_el.innerText.toLowerCase() == "edit") {
        task_edit_el.innerText = "Save";
        task_input_el.removeAttribute("readonly");
        task_input_el.focus();
      } else {
        task_edit_el.innerText = "Edit";
        task_input_el.setAttribute("readonly", "readonly");
      }
    });

    task_delete_el.addEventListener('click', (e) => {
      list_el.removeChild(task_el);
    });
  });
});

:root {
  --dark: #374151;
  --darker: #1F2937;
  --darkest: #111827;
  --grey: #6B7280;
  --pink: #EC4899;
  --purple: #8B5CF6;
  --light: #EEE;
}

* {
  margin: 0;
  box-sizing: border-box;
  font-family: "Fira sans", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #FFF;
  background-color: var(--dark);
}

header {
  padding: 2rem 1rem;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

header h1 {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--grey);
  margin-bottom: 1rem;
}

#new-task-form {
  display: flex;
  ;
}

input,
button {
  appearance: none;
  border: none;
  outline: none;
  background: none;
}

#new-task-input {
  flex: 1 1 0%;
  background-color: var(--darker);
  padding: 1rem;
  border-radius: 1rem;
  margin-right: 1rem;
  color: var(--light);
  font-size: 1.25rem;
}

#new-task-input::placeholder {
  color: var(--grey);
}

#new-task-submit {
  color: var(--pink);
  font-size: 1.25rem;
  font-weight: 700;
  background-image: linear-gradient(to right, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  transition: 0.4s;
}

#new-task-submit:hover {
  opacity: 0.8;
}

#new-task-submit:active {
  opacity: 0.6;
}

main {
  flex: 1 1 0%;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.task-list {
  padding: 1rem;
}

.task-list h2 {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--grey);
  margin-bottom: 1rem;
}

#tasks .task {
  display: flex;
  justify-content: space-between;
  background-color: var(--darkest);
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.task .content {
  flex: 1 1 0%;
}

.task .content .text {
  color: var(--light);
  font-size: 1.125rem;
  width: 100%;
  display: block;
  transition: 0.4s;
}

.task .content .text:not(:read-only) {
  color: var(--pink);
}

.task .actions {
  display: flex;
  margin: 0 -0.5rem;
}

.task .actions button {
  cursor: pointer;
  margin: 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.4s;
}

.task .actions button:hover {
  opacity: 0.8;
}

.task .actions button:active {
  opacity: 0.6;
}

.task .actions .edit {
  background-image: linear-gradient(to right, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.task .actions .delete {
  color: crimson;
}

<header>
  <h1>Task List 2021</h1>
  <form id="new-task-form">
    <input type="text" name="new-task-input" id="new-task-input" placeholder="What do you have planned?" />
    <input type="submit" id="new-task-submit" value="Add task" />
  </form>
</header>
<main>
  <section class="task-list">
    <h2>Tasks</h2>

    <div id="tasks">

    </div>
  </section>
</main>
Tags:

3

Answers


  1. 0

    You can retrieve local storage items using localStorage.getItem('yourKey') and store them using localStorage.setItem('yourKey', youValue)

    const value = 'my_test_value';
const key = 'my_key';

localStorage.setItem(key, value ); // set value in local storage
console.log(localStorage.getItem(key));  // get value in local storage
    Login or Signup to reply.
  2. 0

    You get the storedTasks in the wrong place and do not actually use them
    You likely want this

    I did not test it since I cannot here at SO, but the idea is correct

    const tasks = JSON.parse(localStorage.getItem('tasks') || '[]'); // get the tasks or create an empty array
const saveList = () =>     localStorage.setItem('tasks', JSON.stringify(tasks));
window.addEventListener('load', () => {
  const form = document.querySelector("#new-task-form");
  const input = document.querySelector("#new-task-input");
  const list_el = document.querySelector("#tasks");

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

    const task = input.value;

    const task_el = document.createElement('div');
    task_el.classList.add('task');

    const task_content_el = document.createElement('div');
    task_content_el.classList.add('content');

    task_el.appendChild(task_content_el);

    const task_input_el = document.createElement('input');
    task_input_el.classList.add('text');
    task_input_el.type = 'text';
    task_input_el.value = task;
    task_input_el.setAttribute('readonly', 'readonly');

    task_content_el.appendChild(task_input_el);

    const task_actions_el = document.createElement('div');
    task_actions_el.classList.add('actions');
    tasks.push(task);
    saveList();
    const task_edit_el = document.createElement('button');
    task_edit_el.classList.add('edit');
    task_edit_el.innerText = 'Edit';

    const task_delete_el = document.createElement('button');
    task_delete_el.classList.add('delete');
    task_delete_el.innerText = 'Delete';

    task_actions_el.appendChild(task_edit_el);
    task_actions_el.appendChild(task_delete_el);

    task_el.appendChild(task_actions_el);

    list_el.appendChild(task_el);

    input.value = '';
  });

  list_el.addEventListener('click', (e) => {
    const tgt = e.target;
    const task_el = tgt.closest(".task")
    const task_input_el = task_el.querySelector(".text");
    if (tgt.matches(".edit")) {
      if (tgt.innerText === "Edit") {
        tgt.innerText = "Save";
        task_input_el.removeAttribute("readonly");
        task_input_el.focus();
      } else {
        tgt.innerText = "Edit";
        task_input_el.setAttribute("readonly", "readonly");
      }
    } else if (tgt.matches("delete")) {
      list_el.removeChild(task_el);
      tasks = tasks.filter(task => task != task_el.value);
      saveList();
    }
  });

});
    Login or Signup to reply.
  3. 0

    Something that you seem to miss is, only saving to localStorage doesn’t guarantee that you are gonna get it back on refresh, but you should have to manually fetch and populate you html from your localStorage, on page load.

    Simply paste this code into you main.js, it should work fine.
    I have added a lot of comments and i think they are helpful.

    //pre populating yout html on page loading
function populateStoredTasks(storedTasks) {
//taking the parent item
  const list_el = document.querySelector("#tasks");
  
  
//Map over your stored tasks array and populate your #tasks field

storedTasks.forEach(function (task) {
        // Much code duplication here but you can fix it once you get the                   idea    
         const task_el = document.createElement('div');
        task_el.classList.add('task');
    
        const task_content_el = document.createElement('div');
        task_content_el.classList.add('content');
    
        task_el.appendChild(task_content_el);
    
        const task_input_el = document.createElement('input');
        
        task_input_el.classList.add('text');
        task_input_el.type = 'text';
        task_input_el.value = storedTasks[0];
        task_input_el.setAttribute('readonly', 'readonly');
    
        task_content_el.appendChild(task_input_el);
        
         const task_actions_el = document.createElement('div');
                 task_actions_el.classList.add('actions');
                 
        const task_edit_el = document.createElement('button');
        task_edit_el.classList.add('edit');
        task_edit_el.innerText = 'Edit';
    
        const task_delete_el = document.createElement('button');
        task_delete_el.classList.add('delete');
        task_delete_el.innerText = 'Delete';
    
        task_actions_el.appendChild(task_edit_el);
        task_actions_el.appendChild(task_delete_el);
            
        task_edit_el.addEventListener('click', (e) => {
            if (task_edit_el.innerText.toLowerCase() == "edit") {
                task_edit_el.innerText = "Save";
                task_input_el.removeAttribute("readonly");
                task_input_el.focus();
            } else {
                task_edit_el.innerText = "Edit";
                task_input_el.setAttribute("readonly", "readonly");
            }
        });
    
        task_delete_el.addEventListener('click', (e) => {
            list_el.removeChild(task_el);
        });
    
        task_el.appendChild(task_actions_el);
         
      
        list_el.appendChild(task_el);
  });   


    
}

window.addEventListener('load', () => {
const form = document.querySelector("#new-task-form");
const input = document.querySelector("#new-task-input");
const list_el = document.querySelector("#tasks");


//fetching your storedTaks makes sense here 
// also check if you local storage has 'tasks' item
const storedTasks = localStorage.getItem('tasks') ?  JSON.parse(localStorage.getItem('tasks')) : null;

// call function to populate your html
if(localStorage.getItem('tasks')) {
 populateStoredTasks(storedTasks);
}


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

    const task = input.value;

    const task_el = document.createElement('div');
    task_el.classList.add('task');

    const task_content_el = document.createElement('div');
    task_content_el.classList.add('content');

    task_el.appendChild(task_content_el);

    const task_input_el = document.createElement('input');
    task_input_el.classList.add('text');
    task_input_el.type = 'text';
    task_input_el.value = task;
    task_input_el.setAttribute('readonly', 'readonly');

    task_content_el.appendChild(task_input_el);

    const task_actions_el = document.createElement('div');
    task_actions_el.classList.add('actions');
    //tasks should be stored in an array in your local storage 
    //check if your tasks in localStorage is empty
    if(storedTasks) {
    localStorage.setItem('tasks', JSON.stringify([...storedTasks, task]))
    } else {
            localStorage.setItem('tasks', JSON.stringify([task]))
    }
    
    
    const task_edit_el = document.createElement('button');
    task_edit_el.classList.add('edit');
    task_edit_el.innerText = 'Edit';

    const task_delete_el = document.createElement('button');
    task_delete_el.classList.add('delete');
    task_delete_el.innerText = 'Delete';

    task_actions_el.appendChild(task_edit_el);
    task_actions_el.appendChild(task_delete_el);

    task_el.appendChild(task_actions_el);

    list_el.appendChild(task_el);

    input.value = '';

    task_edit_el.addEventListener('click', (e) => {
        if (task_edit_el.innerText.toLowerCase() == "edit") {
            task_edit_el.innerText = "Save";
            task_input_el.removeAttribute("readonly");
            task_input_el.focus();
        } else {
            task_edit_el.innerText = "Edit";
            task_input_el.setAttribute("readonly", "readonly");
        }
    });

    task_delete_el.addEventListener('click', (e) => {
        list_el.removeChild(task_el);
    });
});
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search