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

Save a paragraph in localStorage so when the page reloads it displays unless it gets deleted – Html

how could I save an element in localStorage that it has been displayed once a button execute a function and after reload is kept unless it is removed

<div class="newd">
  <button class="create" >create task</button>
</div>

let ids1 = document.getElementById('ids')
let ids2 = document.getElementById('ids2')
let ids3 = document.getElementById('ids3')
let newd = document.getElementsByClassName('newd')
let buttonCreateTask = document.getElementsByClassName('create')

function createTask() {

  let paro         = document.createElement('p')
  let remove       = document.createElement('button')
  remove.innerHTML = 'X'
  paro.innerText   = ids1.value + 'n' + ids2.value + 'n' + ids3.value
  paro.appendChild(remove)
  remove.onclick = function() {
    paro.remove()
  }
  if (ids1.value !== '') {
    if (ids2.value !== '') {
      if (ids3.value !== '') {
        newd[0].appendChild(paro)
        ids1.value = ''
        ids2.value = ''
        ids3.value = ''
        //tried to store it like this
        localStorage.setItem('saved', newd[0])
      } else {
        console.log('missing date')
      }
    } else {
      console.log('missing description')
    }
  } else {
    console.log('missing value')
  }
  return paro
}

buttonCreateTask[0].addEventListener('click', createTask)

let saved = localStorage.getItem('saved')
if (saved) {
  document.body.appendChild(saved)
}

buttonCreateTask generates the task once clicked but if I reload, the element created disappears. I tried doing document.body.appendChild(saved) but that gives me

Uncaught TypeError: failed to execute ‘appendchild’ on ‘node’ parameter 1 is not of type ‘node’.

How could I keep it using localStorage?

Tags:

2

Answers


  1. 0

    You could store the value you giving to the variable "paro" and when you want to show it again you can create a new element and use the stored data as it´s value or "innerText".

    Hope it helps!

    Login or Signup to reply.
  2. 0

    You can store the innerHTML of the element in localStorage and use event delegation for handling the remove button. However, it would be best to rethink the design at this point.

    // ...
let prevContent = localStorage.getItem('saved');
if (prevContent) newd[0].innerHTML = prevContent;
newd[0].addEventListener('click', function(e){
    if (e.target.matches('button.remove')) {
        e.target.parentElement.remove();
        localStorage.setItem('saved',  newd[0].innerHTML)
    }
});
let buttonCreateTask = document.querySelector('.create');
buttonCreateTask.addEventListener('click', createTask);
function createTask (){ 
    let paro = document.createElement('p')
    let remove = document.createElement('button')
    remove.classList.add('remove');
    remove.innerHTML = 'X' 
    paro.innerText = ids1.value + 'n' + ids2.value + 'n' + ids3.value 
    paro.appendChild(remove)
    newd[0].appendChild(paro)
    ids1.value = ''
    ids2.value = ''
    ids3.value = ''
    localStorage.setItem('saved',  newd[0].innerHTML)
    return paro
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search