手から出たゴミ

食って、寝て、糞をする合間で作り出されたゴミ

javascriptでローカルにファイルを保存する方法

やったこと

textareaの中身を取得し、ローカルにhtmlファイルとして保存する

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
    <script src="main.js" charset="utf-8"></script>
  </head>
  <body>

    <div id="contents_sample_wrap">
      <input type="type" placeholder="ファイル名(拡張子は不要)" id="file"/><br>
      <input type="button" value="クリック" id="export"/><br>
      <a id="download" target="_blank">ダウンロード</a>
    </div>

    <textarea rows="10" cols="60"></textarea><br>
    <textarea rows="10" cols="60"></textarea>

  </body>
</html>

main.js

var file = "thebcom";

$(function() {
    var text = ''; // テキスト
    if (typeof Blob !== "undefined") {
        //alert('このブラウザに対応しています');
    } else {
        alert('このブラウザには対応していません');
    }



    $("#export").click(function(){  // 出力ボタンを押した場合は、setBlobUrl関数に値を渡して実行
        $("textarea").each(function() {
          var text_length = $(this).val().length;
          if(text_length >= 5){
            text +=  $(this).val() + "<br><br>";
          }
        });
        setBlobUrl("download", text);
    });
});


function setBlobUrl(id, content) {
 // 指定されたデータを保持するBlobを作成する。
    var blob = new Blob([ content ]);
 // Aタグのhref属性にBlobオブジェクトを設定し、リンクを生成
    window.URL = window.URL || window.webkitURL;
    $("#" + id).attr("href", window.URL.createObjectURL(blob));
    file = $("#file").val();
    $("#" + id).attr("download",  file +".html");
}

 終わりに

txtで保存したかったが、改行コード(\n)を入れても改行を認識してくれなかった

苦肉の策で、htmlファイルとして保存して
をいれることになった

ローカルにアクセスする方法がなく苦労したが、なんとか形にできた