将值保存到 localStorage() 并在 Javascript 中重新加载页面时让它们保留

Question

我目前正在制作笔记应用程序，需要您的帮助。

我正在努力了解 localStorage() 的工作原理以及我如何将内容保存到其中。我想重新加载页面，让我写的每条笔记都不会消失。

谢谢。

//// Declare Variables ////
const noteBtn = document.querySelector('.add-note-btn');
const writeNote = document.querySelector('.note-input');
const allSavedNotes = document.querySelector('.added-notes');

//// Write new note and add to list ////
noteBtn.addEventListener('click', function(e){
  // Create new paragraph element
  let newNote = document.createElement('p');
  // Add clas name to element
  newNote.className = 'saved-note';
  // Add the text input
  newNote.textContent = writeNote.value;
  // Append element to div
  allSavedNotes.appendChild(newNote);

  e.preventDefault();
})

<div class="all">
    <div>
      <div class="title">
        <h1 class="heading">Notes List</h1>
      </div>

      <div>
        <div class="writing-notes">
          <textarea class="note-input" cols="35" rows="10"></textarea>
          <a href="#" class="add-note-btn">Add note</a>
        </div>
        
        <div class="added-notes">
    
        </div>
      </div>
    </div>
  </div>

Answer 1

您可以通过将状态附加到空数组来保存 localStorage 中的所有笔记。

我最初创建了一个 state 变量，其中包含较早的 undefined 或一个空数组。

然后 appendNotes 函数将一个段落附加到 allSavedNotes DOM 选择器。

//// Declare Variables ////
const noteBtn = document.querySelector('.add-note-btn');
const writeNote = document.querySelector('.note-input');
const allSavedNotes = document.querySelector('.added-notes');

const state = JSON.parse(localStorage.getItem('notes')) || [];

function appendNotes(text) {
  let p = document.createElement('p');
  p.textContent = text;
   
  // Append element to div
  allSavedNotes.appendChild(p);
}

// append notes on page load
state.map(s => appendNotes(s));

//// Write new note and add to list ////
noteBtn.addEventListener('click', function(e) {
  // Create new paragraph element
  let newNote = document.createElement('p');
  // Add class name to element
  newNote.className = 'saved-note';
  
  const text = writeNote.value.trim();

  // Add the text input
  newNote.textContent = text;
  
  // if there are no `notes` in `localStorage` then use empty array
  if (text !== "") {
      state.push(text)
    localStorage.setItem('notes', JSON.stringify(state));
   }
   
  // Append element to div
  appendNotes(text);
  
  newNote.textContent = "";
  
  e.preventDefault();
})

<div class="all">
  <div>
    <div class="title">
      <h1 class="heading">Notes List</h1>
    </div>

    <div>
      <div class="writing-notes">
        <textarea class="note-input" cols="35" rows="10"></textarea>
        <a href="#" class="add-note-btn">Add note</a>
      </div>

      <div class="added-notes">

      </div>
    </div>
  </div>
</div>

上面的代码不会直接来自 Whosebug，因为它给出了跨源错误：

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

但它适用于 JSFiddle。这是一个有效的 link → https://jsfiddle.net/deadcoder0904/036bp9zy/33/

您可以在这个优秀的博客中了解有关 localStorage 的更多信息 post → https://www.digitalocean.com/community/tutorials/js-introduction-localstorage-sessionstorage

将值保存到 localStorage() 并在 Javascript 中重新加载页面时让它们保留

Saving values to localStorage() and making them stay when I reload the page in Javascript

javascript

local-storage