Webブラウザはローカルファイルを編集できない
Webブラウザ上で動いたスクリプトによってローカルのファイルが編集されてしまっては大変なことになるので、Webブラウザはローカルファイルを編集することができない仕様になっている。
このことにより、HTMLツールでデータの保存・編集を行いたい場合には工夫が必要になる。
方法① データをブラウザのローカルストレージに保存する形式にする
ローカルファイルでデータを扱うことは諦め、ブラウザの中の保存領域を利用する
保存領域はドメインごとに5MBまたは10MBしかないため、大量のデータを扱うことはできない
ブラウザに依存するため他のブラウザや他の端末でデータを共有することができない
方法② ローカルサーバーを立て、その中でコードを動かす形を取る
Webブラウザを恰もデスクトップアプリケーションのように使うことができる
ルートにしたフォルダの外にあるローカルファイルにはアクセスできないことに注意が必要
方法③ WebブラウザではなくElectronによって動かす
Electronでデスクトップアプリケーションを作り、ローカルファイルに自由にアクセスできる形にする
Node.jsの知識が必要になる
方法④ クラウドサービスと連携してデータを保存する
ローカルファイルでデータを扱うのではなく、Web上で個人のデータを保存できるサービスを利用する
クラウドストレージ(Googleドライブなど)
クラウドデータベース
クラウド保存のWebアプリケーション(Notionなど)
APIや認証の知識が必要になる