Блокнот, в котором записки сохраняются даже после обновления - PullRequest
Новая
       45

Блокнот, в котором записки сохраняются даже после обновления

1 голос
/ 24 февраля 2020

Я только что нашел для моего блога набор кодов, который соответствует моим потребностям.

Здесь я приложу код и взгляну, как он выглядит. Хотя это все еще очень просто.

Я хочу спросить, возможно ли настроить этот код, используя JS localstorage, так что он сохранит весь сохраненный текст даже после того, как пользователь обновит sh страницу, или даже лучше, если она останется там даже после того, как пользователь закроет окно и откроет его позже?

Вот как это выглядит прямо сейчас

enter image description here

и вот код: 

$(document).ready(function(){

  var noteCount = 0;
  var activeNote = null;

  $('.color-box').click(function(){
    var color = $(this).css('background-color');
    $('notepad').css('background-color', color);
    $('#title-field').css('background-color', color);
    $('#body-field').css('background-color', color);
  })

  $('#btn-save').click(function(){
    var title = $('#title-field').val();
    var body = $('#body-field').val();
    if (title === '' && body === '') {
      alert ('Please add a title or body to your note.');
      return;
    }
    var created = new Date();
    var color = $('notepad').css('background-color');
    var id = noteCount + 1;
    if (activeNote) {
      $('#' + activeNote)[0].children[0].innerHTML = title;
      $('#' + activeNote)[0].children[1].innerHTML = created.toLocaleString("en-US");
      $('#' + activeNote)[0].children[2].innerHTML = body;
      $('#' + activeNote)[0].style.backgroundColor = color;
      activeNote = null;
      $('#edit-mode').removeClass('display').addClass('no-display');
    } else {
      var created = new Date();
      $('#listed').append('<div id="note' + id + '" style="background-color: ' + color + '"><div class="list-title">' + title + '</div> <div class="list-date">' + created.toLocaleString("en-US") + '</div> <div class="list-text">' + body + '</div> </div>');
      noteCount++;
    };
    $('#title-field').val('');
    $('#body-field').val('');
    $('notepad').css('background-color', 'white');
    $('#title-field').css('background-color', 'white');
    $('#body-field').css('background-color', 'white');
  });

  $('#btn-delete').click(function(){
    if (activeNote) {
      $('#' + activeNote)[0].remove();
      activeNote = null;
      $('#edit-mode').removeClass('display').addClass('no-display');
    }
      $('#title-field').val('');
      $('#body-field').val('');
      $('notepad').css('background-color', 'white');
      $('#title-field').css('background-color', 'white');
      $('#body-field').css('background-color', 'white');
  });

  $('#listed').click(function(e){
    var id = e.target.parentElement.id;
    var color = e.target.parentElement.style.backgroundColor;
    activeNote = id;
    $('#edit-mode').removeClass('no-display').addClass('display');
    var titleSel = $('#' + id)[0].children[0].innerHTML;
    var bodySel = $('#' + id)[0].children[2].innerHTML;
    $('#title-field').val(titleSel);
    $('#body-field').val(bodySel);
    $('notepad').css('background-color', color);
    $('#title-field').css('background-color', color);
    $('#body-field').css('background-color', color);
  })

})
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-left: 5%;
  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;
}

.orange {
  background-color: #FFD37F;
}

.banana {
  background-color: #FFFA81;
}

.honeydew {
  background-color: #D5FA80;
}

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

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

.ice {
  background-color: #79FDFE;
}

.sky {
  background-color: #7AD6FD;
}

.orchid {
  background-color: #7B84FC;
}

.lavendar {
  background-color: #D687FC;
}

.pink {
  background-color: #FF89FD;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title></title>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <header>
      The Note Machine
      <div id='color-select'>
        <div class='color-box white'></div>
        <div class='color-box orange'></div>
        <div class='color-box banana'></div>
        <div class='color-box honeydew'></div>
        <div class='color-box flora'></div>
        <div class='color-box aqua'></div>
        <div class='color-box ice'></div>
        <div class='color-box sky'></div>
        <div class='color-box orchid'></div>
        <div class='color-box lavendar'></div>
        <div class='color-box pink'></div>
      </div>
    </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='app.js'></script>
</html>

Я пытался искать в net другие блокноты, но они не работают в моем блоге, и вот тот, который наконец за работой. Буду очень признателен за любые предложения и помощь. T

Ответы [ 3 ]

0 голосов
/ 24 февраля 2020

Да, вы можете сохранить данные в localStorage и получить данные при загрузке страницы. Чтобы установить элемент localStorage, добавьте ниже функцию в вашем скрипте, которая устанавливает элемент на keytaxta textarea в localstorage. 

$(document).on("keyup","#body-field",function(){
	var text = $("#body-field").val();
	 localStorage.setItem("savedData", text);
});

Добавьте метод ниже для извлечения данных из локального хранилища 

function loadDataFromLocalStorage(){
     if (localStorage.getItem("savedData") !== null) {
      $("#body-field").val(localStorage.getItem("savedData"))
     }
    }

И, наконец, вызовите вышеуказанный метод в $(document).ready() или загрузке страницы, чтобы вернуть данные в текстовую область после загрузки страницы.

0 голосов
/ 24 февраля 2020

Поместите это в блок $(document).ready: 

$(“#title-field”).val(window.localStorage.getItem(“title”) || “”);
$(“#body-field”).val(window.localStorage.getItem(“body”) ||  “”);

$(“#title-field, #body-field”).change(function() {
  var title = $(“#title-field”).val();
  var body = $(“#body-field”).val();

  window.localStorage.setItem(“title”, title);
  window.localStorage.setItem(“body”, body)
})

2 первые строки загрузят текст из localStorage и установят данные на соответствующие входы

Остальные Код - это часть, в которой данные сохраняются в localStorage каждый раз, когда изменяется значение # title-field ИЛИ # body-field.

0 голосов
/ 24 февраля 2020

Если все, что вы хотите сделать, это сохранить в LocalStorage при нажатии кнопки сохранения, то это будет так же просто, как сохранить переменные title и body в LocalStorage в обработчике $('#btn-save').click().

Предполагая, что (как и догадывался @Nawed Khan) вы хотите сохранить заметку без нажатия кнопки «Сохранить», тогда вы захотите внести три изменения:

  1. В основной части вашей функции $(document).ready() проверьте существующие значения LocalStorage и, если они существуют, задайте их для элементов $('#title-field') и $('#body-field').

  2. Добавьте два новых обработчика change к элементам $('#title-field') и $('#body-field'). Когда эти обработчики изменений запускаются, получите значения заголовка и тела из элементов и сохраните их в LocalStorage.

  3. В обработчиках $('#btn-save').click() и $('#btn-delete').click() сбросьте LocalStorage значения активной ноты.

Вам могут пригодиться эти ссылки:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://api.jquery.com/change/

PS Информация, хранящаяся в LocalStorage, может быть потеряна, если пользователь решит очистить данные своего браузера. Если сохранение данных имеет жизненно важное значение, то реализация решения с использованием AJAX для подключения к базе данных, как предложил @Rahul Jha, гарантировала бы сохранение данных.

...