MENU

意外と便利。HTML5のローカルストレージを使ったオリジナルメモ帳。

基本的に、メモ書き思われるものはすべてEvernoteで管理してるんだけど、ちょっとしたメモを残したいときには不向き。特に、Webページからコピペするとスタイルまで付いてくるから好みじゃない。

/*
いつも、Webページの内容をコピーして、Codaのエディタにペーストして、またそれをコピーして、Evernoteにペーストするという非効率的な作業を繰り返しておりまして。
Codaを起動しているときなら良いんだけど、たまたま立ち上げてなかったりするとアレでして……。
*/

「そういえば、HTML5でローカルストレージっつーのが使えるらしいけど、使ったことねぇな〜。使う機会もねぇな〜。」と思いつつ、お勉強のつもりでローカルアプリを作ってみたら、意外と便利なので晒してみるテスト。(確認は OSX SnowLeopard しかやってません)

まずは、「osx apache web共有」あたりで検索して、ローカルでWebサーバを起動します。

んで、あとは、以下のHTML(とjQuery)をローカルに配置するだけ。

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<title>localStorageMemoPad</title>
<style type="text/css">
body { background-color: whitesmoke; margin: 0; padding: 0; text-align: center; }
h1 { font-size: 16px; font-family: Georgia; font-style: italic; margin: 0; padding: 10px; }
textarea { padding: 10px; }
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	var timer = 3000;
	jQuery(document).ready(function(){
		jQuery('#localStorageMemoPad').val(localStorage.getItem('localStorageMemoPad'));
		jQuery('#localStorageMemoPad').focus();
		setInterval(function() {
			localStorage.localStorageMemoPad = jQuery('#localStorageMemoPad').val();
			//console.log(localStorage.getItem('localStorageMemoPad'));
		}, timer);
	});
</script>
</head>
<body>
<h1>localStorageMemoPad</h1>
<textarea style="width:96%" rows="64" id="localStorageMemoPad"></textarea>
</body>
</html>

ブックマークツールバーに登録しておけば、すぐに呼び出せます。

ちなみに上のソースだと、3秒毎にローカルストレージに保存します。当然ながら、Cookieじゃないので、ブラウザを再起動しても入力した内容は保存されてますよ。

ま、お試しっつーことで。