localStorage を使った簡易テキストエディタを作ってみた (たつをの ChangeLog)

localStorage を使った簡易テキストエディタを作ってみた

2014-02-13-3 [Programming]

HTML5 の練習として localStorage を使用したウェブ上の簡易テキストエディタを作ってみました。

- localStorage Memo (lostmemo)
http://chalow.net/misc/lostmemo.html

同じブラウザを使う限り入力されたテキストデータが保存され残り続けます。また、ブックマークレットでの利用も考慮し add パラメタで外部からテキスト追加ができるようにしました。

外部から追加する例：
(1) http://chalow.net/misc/lostmemo.html?add=ABCDEFG
(2) http://chalow.net/misc/lostmemo.html?add=%E8%BF%BD%E5%8A%A0

ブックマークレット：
- ページタイトルとURLをメモに追加する→ addTU

ソースコード(lostmemo.html)：Version 2014.2.13

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>localStorage Memo (lostmemo)</title>
<script type="text/javascript">
function show() {
  document.getElementById("ta").value = localStorage["memo"] || "";
  var p = location.search.substring(1).split('&');
  var h = {};
  for(var i = 0; i < p.length; i++) {
    h[p[i].split('=')[0]] = decodeURIComponent(p[i].split('=')[1]);
  }
  if (h["add"]) add(h["add"]);
}
function add(str) {
  var t = document.getElementById("ta").value;
  document.getElementById("ta").value = t + '\n' + str;
  save();
  var u = location.protocol + '\/\/' + location.host + location.pathname;
  window.location.href = u;
}
function save() {
  localStorage["memo"] = document.getElementById("ta").value;
}
</script>
</head>
<body onload="show()">
<textarea id="ta" cols="40" rows="20" onkeyup="save()"></textarea>
<br>
<button onclick="show()">Reload</button>
<button onclick="localStorage.clear();show()">Clear All</button>
</body>
</html>

メモ：
- onkeypress で delete を認識しない。→ onkeyup にする。
- "?XXX=YYY&" を取り込みたい。→ location.search をパーズする。
- "?XXX=YYY&" を削除したURLを作りたい。→ location.protocol,host,pathname の組み合わせ。

分からないこと：
- ブックマークレットで常に同じタブで開く方法。window.open() の target 指定ではうまくいかない。増殖しちゃう。→パラメタ指定での閉じるモードを作るか……。