Как добавить все заметки в localStorage, чтобы они сохранялись при перезагрузке страницы (в верхнем левом углу)

ProgramBox

Как добавить все заметки в localStorage, чтобы они сохранялись при перезагрузке страницы (в верхнем левом углу)

Post author:admin
Запись опубликована:19 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

JavaScript

Программа может сохранять и редактировать заметки, но при перезапуске страницы все записанные заметки теряются.

Проблема в том, как оставить все заметки сохраненными через localStorage

Простое приложение для сохранения заметок:

 var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => { 
  var noteCount = 0;
  var activeNote = null;
document.querySelector('#btn-save').addEventListener("click", () => {
    var title = document.getElementById('title-field').value;
    var body = document.getElementById('body-field').value;
    if (title === '' amp;amp; body === '') {
      alert ('Please add a title or body to your note.');
      return;
    }
    var created = new Date();
    var color = document.querySelector("notepad");
    color.style.backgroundColor = "white";
    var id = noteCount   1;
    if (activeNote) {
        
       const note = document.getElementById(activeNote)
  note.children[0].innerHTML = title;
  note.children[1].innerHTML = created.toLocaleString("en-US");
  note.children[2].innerHTML = body;
  note.style.backgroundColor = color;
  activeNote = null;
        var box = document.querySelector('#edit-mode');
        box.classList.remove('display');
        box.classList.add("no-display");
        
    } else {
      var created = new Date();
       const listed = document.getElementById("listed");
        listed.innerHTML = listed.innerHTML   '<div id="note'   id    '"><div class="list-title">'   title   '</div> <div class="list-date">'   created.toLocaleString("en-US")   '</div> <div class="list-text">'   body   '</div> </div>';
      noteCount  ;
    };
   
     document.getElementById('title-field').value = ''
      document.getElementById('body-field').value = ''
  });
   
 
document.querySelector('#btn-delete').addEventListener("click", () => {
    if (activeNote) {
      let note = document.getElementById(activeNote);
  note.parentElement.removeChild(note);
      activeNote = null;
      var box_2 = document.querySelector('#edit-mode');
        box_2.classList.remove('display');
        box_2.classList.add("no-display");
    }
    document.getElementById('title-field').value = ''
      document.getElementById('body-field').value = ''
     
 
  });
 
 
    document.querySelector('#listed').addEventListener("click", (e) => { 
    var id = e.target.parentElement.id;
    var color = e.target.parentElement.style.backgroundColor;
    activeNote = id;
    var box_1 = document.querySelector('#edit-mode');
        box_1.classList.remove('display');
        box_1.classList.add("no-display");
    var titleSel = document.querySelectorAll('#'   id)[0].children[0].innerHTML;
    var bodySel = document.querySelectorAll('#'   id)[0].children[2].innerHTML;
    document.getElementById('title-field').value = titleSel;
    document.getElementById('body-field').value = bodySel;;
    
  })

    
});

 header {
  text-align: left;
  font-weight: 800;
  font-size: 28px;
  border-bottom: solid 3px #DEDEDE;
  display: flex;
  justify-content: space-between;
}

footer {
  display: flex;
  flex-flow: row-reverse;
  padding: 5px 20px;
}

.headers {
  margin-top: 20px;
  margin-bottom: -10px;
  font-size: 20px;
}

#list-head {
  margin-left: 2.5%;
  width: 30.5%;
  display: inline-block;
  text-align: center;
}

#note-head {
  width: 60%;
  margin-left: 5%;
  display: inline-block;
  text-align: center;
}

noteList {
  margin-top: 20px;
  display: inline-block;
  margin-left: 2.5%;
  width: 30.5%;
  height: 400px;
  overflow: scroll;
  border: solid 3px #929292;
  border-radius: 5px;
  background-color: #DEDEDE;
}

.within-list {
  cursor: pointer;
}

.list-title {
  font-weight: 600;
  font-size: 20px;
  padding: 5px 5px 0 5px;
}

.list-date {
  font-weight: 200;
  font-style: italic;
  font-size: 12px;
  padding: 0 5px 0 5px;
}

.list-text {
  padding: 0 5px 5px 5px;
  border-bottom: solid 1px black;
}

notePad {
  display: inline-block;
  border: solid 3px black;
  border-radius: 10px;
  height: 400px;
  overflow: scroll;
  width: 60%;
  margin-top: 0;
}

#note-title {
  font-size: 24px;
  padding: 0 0 5px 5px;
  border-bottom: solid 2px #DEDEDE;
}

#note-body {
  padding: 5px;
}

#body-field, #title-field {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
}

#title-field {
  font-size: 18px;
  font-weight: 600;
}

#body-field {
  font-size: 14px;
  font-weight: 500;
  height: 400px;
}

#color-select {
  display: flex;
  flex-flow: row-reverse nowrap;
  padding: 5px 10px 0 0;
}

.color-box {
  border: solid 2px #929292;
  height: 10px;
  width: 10px;
  margin-left: 5px;
}

.display {
  display: visible;
}

.no-display {
  display: none;
}

button {
  margin: 5px;
  border: solid 3px grey;
  border-radius: 10%;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: #DEDEDE;
}

button:hover, .color-box:hover {
  cursor: pointer;
}

#listed:nth-child(odd):hover {
  cursor: pointer;
}

#btn-save {
  background-color: #2F5032;
}

#btn-delete {
  background-color: #E41A36;
}

.white {
  background-color: white;
}


.flora {
  background-color: #78F87F;
}

.aqua {
  background-color: #79FBD6;
}




.lavendar {
  background-color: #D687FC;
}

 <<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title></title>
    <link rel='stylesheet' href='main.css'>
  </head>
  <body>
    <header>
      The Note Machine
      
    </header>
    <main>
      <div class="headers">
        <div id="list-head">
          <b>Your Notes</b> <i>(click to edit/delete)</i>
        </div>
        <div id="note-head">
          <b>Your Notepad</b>
          <span id="edit-mode" class="no-display">
            <i> (edit mode) </i>
          </span>
        </div>
      </div>
      <noteList>
        <div id='listed'>
        </div>
      </noteList>
      <notepad>
        <div id="note-title">
          <input id="title-field" type="text" placeholder="title your note">
        </div>
        <div id="note-body">
          <textarea id="body-field"></textarea>
        </div>
      </notepad>
    </main>
    <footer>
      <button id="btn-save">Save</button>
      <button id="btn-delete">Delete / Clear </button>
    </footer>
  </body>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
  <script type='text/javascript' src='Code.js'></script>
</html>

jsfiddle: http://jsfiddle.net/blackessej/j47Ye/3 / ЛЮБАЯ помощь в правильном направлении очень ценится.

1. Это довольно широкий вопрос, но вы можете либо сделать это вручную, либо использовать библиотеку, такую как localforage ( npmjs.com/package/localforage ) в основном использовать ваше локальное хранилище как мини-базу данных и сохранять и извлекать оттуда ваши заметки. Это сделало бы его постоянным.

Ответ №1:

Вы можете просто установить значение в локальном хранилище и получить это значение, когда вам нужно просто добавить этот код

 localStorage.setItem("note", document.getElementById(activeNote));

когда вам нужно получить заметку, затем

 localStorage.getItem("note)

Ответ №2:

// Он сохранит / установит объект с ключами и сохранит все объекты в ключе notes с помощью stringify

  localStorage.setItem(
        "notes",
        JSON.stringify({
          name: "math notes",
          desc: "description",

        });// you can set number of object in same key("notes")
      );

// Читать локальное хранилище :

 if (localStorage.getItem("notes")) {
      const parsedata = JSON.parse(localStorage.getItem("notes"));// it will return all object which has store while setting local Storage 
      name = parsedata.name;
      desc= parsedata.desc;

    }

Аналогичным образом вы можете настроить свой localStorage в соответствии с вашими потребностями и прочитать его.

ссылка для ссылки: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

1. Извините, я не могу понять, куда поместить этот фрагмент кода, чтобы программа работала должным образом, не могли бы вы описать более подробно, пожалуйста

2. Когда вы сохраняете заметку. У вас есть хранилище в локальном хранилище. Когда вы перечисляете заметки, вам нужно читать из локального хранилища