今回は html で文字列を
ローカルに保存する場合の
ソースを公開してみようと思います。
名前を付けて保存機能があるブラウザでは
名前を付けて保存で保存します。
Chrome や Edge が該当します。
名前を付けて保存機能が無いブラウザでは
直接ダウンロードします。
今回のソースコード
ローカルに保存するコード
let fileName = document.getElementById('fileNameTextBox').value;
const pattern = /[\\\/:\*\?\"<>\|]/;
if(pattern.test(fileName)){
window.alert('ファイル名に使用できない文字が含まれています。');
}
else {
const save = ""; //この save 変数に保存する文字列を入れて下さい。
if(fileName == ''){
var dt = new Date();
var y = '' + dt.getFullYear();
var m = ('00' + (dt.getMonth()+1)).slice(-2);
var d = ('00' + dt.getDate()).slice(-2);
var hour = ('00' + dt.getHours()).slice(-2);
var minute = ('00' + dt.getMinutes()).slice(-2);
var second = ('00' + dt.getSeconds()).slice(-2);
fileName = "〇〇バックアップ" + (y + m + d + hour + minute + second); //〇〇にはサイト名を入れて下さい。
}
if(typeof window.showSaveFilePicker != 'function'){
const blob = new Blob([save],{type:"text/plain"});
let downloadTag = document.createElement('a');
downloadTag.href = URL.createObjectURL(blob);
downloadTag.download = fileName + ".txt";
downloadTag.click();
window.setTimeout( function() { URL.revokeObjectURL(blob);}, 10000 );
window.alert('バックアップを保存しました。');
} else {
let downloadTag = document.createElement('a');
downloadTag.addEventListener('click', async () => {
const opts = {
suggestedName: fileName,
types: [{
description: 'Text file',
accept: {'text/plain': ['.txt']},
}],
};
try{
const handle = await window.showSaveFilePicker(opts);
const writable = await handle.createWritable();
await writable.write(save);
await writable.close();
window.alert('バックアップを保存しました。');
} catch(e){
}
})
downloadTag.click();
}
}
上記コードでは
ファイル名はファイル名のテキストボックスを
用意するようにしていますが
ファイル名をこちらで指定してしまう事もできます。
セーブデータを圧縮して保存する場合
ブラウザでセーブデータを
圧縮して保存したい事は稀だとは思いますが、
セーブデータを圧縮して保存する場合は
以下のコードにすると良いでしょう。
圧縮してセーブデータを保存・読み込みする場合
async function save() {
let fileName = document.getElementById('fileNameTextBox').value;
const pattern = /[\\\/:\*\?\"<>\|]/;
if(pattern.test(fileName)){
window.alert('ファイル名に使用できない文字が含まれています。');
}
else {
let save = 'SaveDataTypeA!ver1.0.0!';
let saveOne = ""; //ここに保存する文字列を入れて下さい。
const readableStream = new Response(saveOne).body.pipeThrough(new CompressionStream('deflate'));
save += await bolbToBase64(await new Response(readableStream).blob());
if(fileName == ''){
var dt = new Date();
var y = '' + dt.getFullYear();
var m = ('00' + (dt.getMonth()+1)).slice(-2);
var d = ('00' + dt.getDate()).slice(-2);
var hour = ('00' + dt.getHours()).slice(-2);
var minute = ('00' + dt.getMinutes()).slice(-2);
var second = ('00' + dt.getSeconds()).slice(-2);
fileName = "〇〇バックアップ" + (y + m + d + hour + minute + second); //〇〇にはサイト名を入れて下さい。
}
if(typeof window.showSaveFilePicker != 'function'){
const blob = new Blob([save],{type:"text/plain"});
let downloadTag = document.createElement('a');
downloadTag.href = URL.createObjectURL(blob);
downloadTag.download = fileName + ".txt";
downloadTag.click();
window.setTimeout( function() { URL.revokeObjectURL(blob);}, 10000 );
window.alert('バックアップを保存しました。');
}
else{
let downloadTag = document.createElement('a');
downloadTag.addEventListener('click', async () => {
const opts = {
suggestedName: fileName,
types: [{
description: 'Text file',
accept: {'text/plain': ['.txt']},
}],
};
try{
const handle = await window.showSaveFilePicker(opts);
const writable = await handle.createWritable();
await writable.write(save);
await writable.close();
window.alert('バックアップを保存しました。');
} catch(e){
}
})
downloadTag.click();
}
}
}
async function bolbToBase64(blob) {
return await new Promise(resolve => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
resolve(reader.result.replace(/data:.*\/.*;base64,/, ''));
};
});
}
document.getElementById('files').addEventListener('change', function(e) {
var result=e.target.files[0];
var reader=new FileReader();
reader.readAsText(result);
reader.addEventListener('load', function() {
myLoad(reader.result);
});
e.target.value = '';
});
async function myLoad(loadText) {
let index = loadText.indexOf('!');
if(!loadText.startsWith('SaveData')){
window.alert('ファイルの読み込みに失敗しました。');
return;
}
const isTypeA = loadText.startsWith('SaveDataTypeA');
loadText = loadText.substr(index + 1);
index = loadText.indexOf('!');
const versionInfo = loadText.substr(0, index);
loadText = loadText.substr(index + 1);
const oneTimeBlob = await base64ToBlob(loadText);
const readableStream = oneTimeBlob.stream().pipeThrough(new DecompressionStream('deflate'));
loadText = await new Response(readableStream).text();
//ここで loadText をロードしたい変数に代入して下さい。
}
async function base64ToBlob(base64) {
return await fetch('data:application/octet-stream;base64,' + base64).then(res => res.blob());
}
参考サイト：
https://168iroha.net/blog/article/202401031600/
Compression Streams API を使用しています。
API の内部処理が変わってセーブデータが
正常に読み込めなくなった場合に
我々は責任を負わないものとさせて下さい。
何卒よろしくお願い致します。
以上 html で文字列をローカルに
保存するソースを公開しました。
この処理を書く時間を
短縮できたならば幸いです。
皆さんの開発の助けになれますように。
閲覧ありがとうございました。
追記
JavaScript の圧縮関連の
記事を書かれている方から
圧縮の箇所について提案頂きました。
用途ごとの最適な圧縮コードを頂けたため
是非コメント欄もご覧頂けると幸いです。