HTML5 の Web Storage を使って Web Editor を作ってみた
HTML5の勉強がてら、Web Editorを作ってみました。
View example
リンクはこちら
http://tm-labo.com/laboratory/finding/web-editor/機能一覧
機能 | 概要 |
---|---|
保存 | ファイル名を入力してSaveボタンを押すことでWeb Storageにデータを保存することができます。 |
ロード | ファイルリスト内にある項目を選択し、Loadボタンを押すことでデータをロードすることができます。また項目をダブルクリックしても同じ動作を行ないます。 |
削除 | ファイルリスト内にある項目を選択し、Deleteボタンを押すことでデータを削除することができます。 |
クリア | Clearボタンを押すことで、エディタ内にある文字をクリアします。 |
ダウンロード | Downloadボタンを押すことで、Editor内のデータを持ったファイルをダウンロードすることができます。ファイル名に拡張子が付いていなかった、場合デフォルトの.txtとしてダウンロードします。 |
ソース
コード内で主にWeb Storageの機能を使っている部分は、こちらです。
// file list を初期化 function updateFileList() { var file_list = $("#file-list"); file_list.html(""); // localStorageからデータを取り出してセレクトボックスに追加 for (var i=0; i<localStorage.length; ++i) { var key = localStorage.key(i); var option = $("<option />").text(key).val(key); file_list.append(option); } } function save(file_name, data) { var now = localStorage.getItem(file_name); if (now != undefined) { if (confirm("そのファイルはすでに存在します。上書きしてもよろしいでしょうか?")==false) { return 0; } } // localStorageにデータを保存 // 引数は key, data です localStorage.setItem(file_name, data); updateFileList(); } function load(file_name) { // localStorageからキーに対応したデータを取得する return localStorage.getItem(file_name); } function remove(file_name) { // localStorageからキーに対応したデータを削除する localStorage.removeItem(file_name); updateFileList(); }
実際に使うこともできるので、
よかったらメモ帳代わりに使ってみて下さい。
※パスを移動したり、削除する可能性もあるので重要なデータは
ダウンロードするようお願いします。
[…] 前回の Web Editor に続き、翻訳ツールを作ってみました。 […]
[…] 去年作った Web Editorで HTML5 から追加された localStorage を使いつつもダウンロード機能も実装しました. これは php 経由で行っているため, 実装は非常に簡単です. ですが, これだと php の動 […]
@phi_jp 昨日は失礼しました。別な方と間違えてました。言及したサイトはこれです。これのとび先が消えていたので、もしよければ見たいと思っておりました。よろしくお願い申し上げます。”http://t.co/OCfOIAOPlY”
昔こちらのエントリー
http://t.co/i8WVaSm76W
で作ってた WebEditor がリンク切れ & 行方不明になっちゃったので作り直しました.
http://t.co/6Lpbm5SORE
#html5 #localstorage
Webstorage ファイル保存