こんばんは。ファガイです。本日はJavaScriptだけでブラウザのある情報のデータを保存する機能の実装方法について書こうと思います。
概要
ローカル上だけでファイルの保存ができるようになる方法になります。
自分が作っているMarkdown-F Editorはその機能を使って保存を実装しています。
今回利用する機能はHTML5の機能なので、ブラウザによっては実装されていない可能性がありますので、注意。
確認ブラウザ
- IE11
- Firefox
- GoogleChrome
にて確認を取ってます。IEに関しては独自関数を使っているため、前のブラウザでは対応されていない可能性があります。
ソースコード
ソース自体は結構簡単です。
var text = "テキストデータ";
var blob = new Blob([text], {type: "text/plain"}); // バイナリデータを作ります。
// IEか他ブラウザかの判定
if(window.navigator.msSaveBlob)
{
// IEなら独自関数を使います。
window.navigator.msSaveBlob(blob, "ファイル名.txt");
} else {
// それ以外はaタグを利用してイベントを発火させます
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.target = '_blank';
a.download = 'ファイル名.txt';
a.click();
}
また、IE以外の場合はcreateObjectURLを使用しているので出来るだけ使用後に
URL.revokeObjectURL();
を実行してオブジェクトURLをメモリから開放させるのが良いです。
ではではー。
コメント