javascript でテキストをローカルに保存する方法

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

Pocket

前回, HTML5 File API を使ってファイルを読み込む方法について書きました. 今回は, Data URI scheme を使ってファイルをローカルに保存する方法について書きます.

去年作った Web Editorで HTML5 から追加された localStorage を使いつつもダウンロード機能も実装しました. これは php 経由で行っているため, 実装は非常に簡単です. ですが, これだと php の動くサーバにアップしないと動かないのでローカルで遊べません.

そこで目をつけたのが Data URI scheme です!! 詳しくはこちら. ざっくり説明しますと, URL に住所だけでなくデータ自体も含めちゃおう! って感じですかね. 間違っていたらごめんなさい.

a タグの href に Data URI scheme を書けばブラウザ側で良い感じに処理してくれます. それを利用することでデータをダウンロードできます. サンプル作ったのでよかったらどぞ~

SAMPLE

サンプルはこちらで見ることができます.

動作はとてもシンプルです. テキストエリアに何か書き込み, download ボタンを押すとテキストエリアの内容が書きこまれたデータがダウンロードされます.

問題点としては, ファイル名を決められないということです. 方法はあるのかもしれませんが, header 情報を書き込む術が見つかりませんでした.ゴメンナサイ. ダウンロード後にリネームしてください. (firefoxの場合右クリックで”名前をつけてリンク先を保存”で名前をつけてダウンロードすることが可能)

CODE

コード全体です.

<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>TM Lib : Editor</title>
        
        <style>
            
        </style>
        <script>
            var $id = function(id) { return document.getElementById(id); }
            
            window.onload = function()
            {
                $id("download-link").addEventListener("click", function(){
                    var value = $id("ta").value;
                    var href = "data:application/octet-stream," + encodeURIComponent(value);
                    this.setAttribute("href", href);
                }, false);
            }
        </script>

    </head>
    
    <body>
        
        <h1>TM Lib : Download</h1>
        
        <textarea id="ta" cols="64" rows="16">
#include <stdio.h>

int main()
{
    printf("Hello, world!");
    return 0;
}
        </textarea><br/>
        <a id="download-link" href="#">Download</a>
        
    </body>
</html>

Data URI scheme をセット

download リンクをクリックした際に, テキストエリアに書きこまれている文字列を取得し そのデータを含んだ Data URI scheme を作成してaタグのhrefにセットしています.

$id("download-link").addEventListener("click", function(){
    var value = $id("ta").value;
    var href = "data:application/octet-stream," + encodeURIComponent(value);
    this.setAttribute("href", href);
}, false);

今後, HTML5 の File API に write 関係の API が追加されていけば, このテクニックは廃れていくでしょう. けど, ローカルで遊ぶ分には十分使えるかと思います.

参考サイト

TRACK BACK URL

POST COMMENT

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

COMMENT