这个简单的在线记事本应用程序允许用户编写简单的文本（如一组快速笔记和提醒），并将其保存以备日后使用。这是一个非常简单的概念，但它对任何想从浏览器中快速写下一些文本或笔记并将其保存在本地的人来说都很有用，这样他们就可以随时访问它们

我们使用JQueryJavascript库来实现一个文本区域，该区域充当在线文本记事本。此解决方案的主要优点是，您可以在web浏览器中使用笔记，键入的文本将存储在浏览器窗口的内部存储中，也称为会话存储，仅供临时（会话）使用。

如何使用它:

1.为记事本创建一个文本区域。

<textarea id="notepad" name="notepad" placeholder="Type or paste your text here...">
  ...
</textarea>

2.在记事本旁边创建保存/复制/清除按钮。

<a href="#" id="save-btn">
  Save
</a>
 
<a href="#" class="copy-btn" data-clipboard-target="#notepad">
  Copy
</a>
 
<a href="#" class="clear-btn">
  Clear
</a>

3.在文档中加载所需的jQuery和Session Storage Manipulation库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="assets/js/jquery.session.js"></script> 

4.用于激活记事本的主脚本。

$( document ).ready(function() {
 
  // get current session data
  var session_note = $.session.get('session_notepad');;
  if(session_note !== ""){
    $("#notepad").val(session_note);
  }
 
  // save bnutton
  $("#save-btn").click(function() {
 
    //get current text
    var note = $("#notepad").val();
 
    //set session data
    $.session.set('session_notepad', note);
 
    // show success message for 1 second
    $(".success-message").show();
    setTimeout(
      function() 
      {
        $(".success-message").hide();
      }, 1000);
  });
 
  //clear session data on button click
  $(".clear-btn").click(function() {
    $.session.remove('session_notepad');
    $("#notepad").val("");
  });
 
});

5.启用“复制”按钮将笔记复制到剪贴板中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

var clipboard = new ClipboardJS('.copy-btn');

预览截图

jQuery和会话存储 简单在线记事本