时间戳

首页 > 解决方案 > 一个记事本，即使在刷新后也能保留笔记

javascript - 一个记事本，即使在刷新后也能保留笔记

问题描述

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

在这里，我将附上代码并一瞥它的外观。虽然它仍然很简单。

我想问的是是否可以使用 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>

我尝试在网上搜索其他记事本，但它们在我的博客上不起作用，这是最终起作用的。我非常感谢任何形式的建议和帮助。吨

标签： javascriptjqueryhtmlcssnotepad

解决方案

是的，您可以保存数据localStorage并在页面加载时获取数据。要设置localStorage项目，请在脚本中添加以下函数，该函数在 localstorage 中的 textarea 的 keyup 上设置项目。

$(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()页面加载后将数据设置回文本区域。

推荐阅读