自分専用ポータルに、自動保存するメモ機能を付けたくて調べてみたところ、ローカルストレージを使えば簡単にできるようなので早速試してみました。

ローカルストレージとは

HTML5において、Webブラウザにデータを保存する仕組みです。例えば、フォームに入力した内容を保存しておくというような使い方ができます。よく似たものにcookieがありますが、cookieよりも扱いが簡単です

Chromeでの確認方法

Chromeのデベロッパーツールで内容を確認できます。

簡易メモ

デモ

HTML

<html>
  <head>
    <!DOCTYPE HTML>
    <html lang="ja">
    <meta charset="UTF-8">
    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="memo.js"></script>
  </head>
  
  <body>
    <textarea id="my_memo" cols="40" rows="18"></textarea>
    <div class="btn-clear">
      <input type="button" id="clear" value="クリア" class="fas">
    </div>
  </body>
</html>

memo.js

jQuery(function($){
	// localStorageに保存されたデータを取り出す
	if (localStorage.getItem('my_memo')) {
		$('#my_memo').val(localStorage.getItem('my_memo'));
	}
	
	// クリアボタンを押したら削除
	$('#clear').click(function() {
		$('#my_memo').val('');
		localStorage.removeItem('my_memo');
	});
	
	// textareaに入力されたら自動保存
	$('#my_memo').bind('keyup', function() {
		localStorage.setItem('my_memo', $('#my_memo').val());
	});
});