javascript - 即使刷新后也能保留所写笔记的记事本

Question

我刚刚为我的博客找到了一组适合我现在需要的代码。

在这里，我将附上代码并简要介绍一下它的样子。虽然还是很简单。

我想问的是是否可以使用 JS localstorage 来调整这些代码，这样即使在用户刷新页面后它也会保留所有保存的文本，或者如果即使在用户关闭后它仍然保留在那里就更好了窗口并稍后重新打开它？

这是现在的样子

这是代码:

$(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>

我尝试在网上搜索其他记事本，但它们无法在我的博客上使用，这是最终可以使用的记事本。我非常感谢任何建议和帮助。

Answer 1

如果您只想在单击“保存”时保存到 LocalStorage，那么只需保存 title 和 body 即可> $('#btn-save').click() 处理程序中 LocalStorage 的变量。

假设(正如 @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/

附注如果用户选择清除浏览器数据，存储在 LocalStorage 中的信息可能会丢失。如果数据的保存至关重要，那么按照 @The Rahul Jha 的建议实现使用 AJAX 连接到数据库的解决方案将保证数据的保存。