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

Question

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

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

我想问的是，是否可以使用 JS localstorage 调整这些代码，以便即使在用户刷新页面后它也会保留所有已保存的文本，或者如果即使在用户关闭 window 后它仍保留在那里甚至更好后来又开了？

这是它现在的样子

这是代码：

 $(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 中搜索其他记事本，但它们无法在我的博客上使用，而这是最终可以使用的记事本。 我真的很感激任何建议和帮助。 吨

Answer 1

如果您只想在单击保存时保存到LocalStorage ，那么它就像在$('#btn-save').click()处理程序中将title和body变量保存到LocalStorage一样简单。

假设（正如@Nawed Khan 猜测的那样）您希望在用户不必单击“保存”的情况下保存笔记，那么您需要进行三处更改：

1. 在$(document).ready() function 的主体中，检查现有的LocalStorage值，如果存在，则将它们设置在$('#title-field')和$('#body-field')元素。

2. 向$('#title-field')和$('#body-field')元素添加两个新的change处理程序。 当这些更改处理程序触发时，从元素中获取 title 和 body 值并将它们保存到LocalStorage 。

3. 在$('#btn-save').click()和$('#btn-delete').click()处理程序中，重置活动笔记的LocalStorage值。

您应该会发现这些链接很有用：

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

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

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

Answer 2

是的，您可以将数据保存在localStorage中并在页面加载时获取数据。 要设置localStorage项，请在您的脚本中添加以下 function，该脚本将在 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()或页面加载中调用上述方法，在页面加载后将数据设置回文本区域。

Answer 3

将其放入$(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)
})

前两行将从 localStorage 加载文本并在相应的输入上设置数据

代码的 rest 是每次 #title-field 或 #body-field 的值发生变化时将数据保存到 localStorage 的部分。