在 localStorage 中保存一个段落，这样当页面重新加载时它会显示，除非它被删除

Question

我怎么能在 localStorage 中保存一个元素，一旦按钮执行一个功能，它就会显示出来，并且在重新加载后保持不变，除非它被删除

<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

单击后生成任务，但如果我重新加载，创建的元素就会消失。我试着做

document.body.appendChild(saved)

但这给了我

未捕获的类型错误：无法在“节点”上执行“appendchild”参数 1 不是“节点”类型。

如何使用 localStorage 保存它？

Answer 1

你可以存储你给变量“paro”的值，当你想再次显示它时，你可以创建一个新元素并使用存储的数据作为它的值或“innerText”。

希望对您有所帮助！

Answer 2

您可以将元素的

innerHTML

存储在

localStorage

中，并使用事件委托来处理删除按钮。但是，此时最好重新考虑设计。

// ...
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
}