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
メモ:
- onkeypress で delete を認識しない。→ onkeyup にする。
- "?XXX=YYY&" を取り込みたい。→ location.search をパーズする。
- "?XXX=YYY&" を削除したURLを作りたい。→ location.protocol,host,pathname の組み合わせ。
分からないこと:
- ブックマークレットで常に同じタブで開く方法。window.open() の target 指定ではうまくいかない。増殖しちゃう。→パラメタ指定での閉じるモードを作るか……。
- 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 指定ではうまくいかない。増殖しちゃう。→パラメタ指定での閉じるモードを作るか……。