ガレコレ [Garage Collection]
2020年9月25日(金)
[JavaScript] テキストを保存 #■パソコン・通信
　JavaScriptでは、デバイスに保存する機能はありません。HTML5から、Aタグにdownload指定ができるようになりました。これを利用して、疑似保存します。文章や画像のblob
 
[Binary
 
Large
 
OBject]を作成して、これをURL化したものをダウンロードします。ややこしそうですが、意外と簡単です。

　なお、上書き保存できないので、再保存の場合、memo
 
(1).txtのように、連番のファイル名で保存されます。ダウンロードと同じ仕様です、あしからず。

http://neconote.jp/prg/save.html

--
 
要所だけ抜粋
 
--

<head>

<script>

function
 
_save_text(){
 
 
$blob
 
=
 
new
 
Blob([document.getElementById("id_textarea").value],{type:"text/plain"});
 
//①
 
 
$url
 
=
 
URL.createObjectURL($blob);
 
//②
 
 
$a
 
=
 
document.createElement("a");
 
//③
 
 
document.body.appendChild($a);
 
 
$a.download
 
=
 
"memo.txt";
 
//④
 
 
$a.href
 
=
 
$url;
 
//⑤
 
 
$a.click();
 
//⑥
 
 
$a.remove();
 
//⑦
 
 
setTimeout(URL.revokeObjectURL(),200,$url);
 
//⑧
}

</script>

</head>

<body>

<textarea
 
id="id_textarea"></textarea><br>
<button
 
onclick="_save_text();">Save</button>

</body>
--

①blob作成。
②URL化。
③Aタグを作成。
④ファイル名(download)を指定。
⑤URL(href)を指定。
⑥Aタグをクリック→ダウンロード開始。
⑦作成したAタグを削除。
⑧blob解除。

　①blob作成と⑧blob解除は対です。⑧は必須ではないのですが、メモリーを解放してあげましょう。⑧blob解除において、setTimeout()により時間稼ぎしているのは、iOS(iPhone,
 
iPad)での'webkit
 
blob
 
resource
 
error
 
1'を回避するためです。なお、setTimeout()の記述方法に注意しましょう。

×setTimeout(関数(引数),秒数);
○setTimeout(関数(),秒数,引数);



P.S.
 
Aタグを新規作成しない方法も可能です。<a
 
style="display:none;"
 
id="id_a"></a>と非表示のAタグを用意して、$a
 
=
 
document.getElementById("id_a");とオブジェクトを指定すれば、同様に出来ます。



P.S.2
 
何度も繰り返してお伝えしていますが、JavaScriptでは、変数名の頭に$は不要です。変数名の頭に$、関数名の頭に_を付けるのは、ガレコレ仕様です。続く文字列に使用禁止文字列を考慮する必要が無く、検索もしやすくなるので、ずっとこのやり方で通しています。気になるようでしたら、$や_を削除してご利用下さい。

P.S.2-2
 
JavaScriptでは、変数名や関数名で２つ以上の単語を繋げるときには、キャメル記法
 
[camel
 
case]
 
でラクダのコブのように「sameName」とすると統一感があります。しかし、アルファベットの識別に弱い自分は、スネーク記法
 
[snake
 
case]で「same_name」と記述しています。偶然にも、この方がJavaScript言語自体と区別できて使い良いのです。

P.S.2-3
 
id="id_*"、name="n_*"と記述しています。普通は同一にしますが、form部品でnameを使いたくない場合がしばしばあり、ごちゃごちゃになるので、そうしています。

　以上、記述が特殊なのは、プログラマーの勝手な都合です。
　
お問い合わせ
by Network Communication Note