HTML5 の Web Storage を使って Web Editor を作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

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();
}
    

実際に使うこともできるので、
よかったらメモ帳代わりに使ってみて下さい。

※パスを移動したり、削除する可能性もあるので重要なデータは
ダウンロードするようお願いします。

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT