HTML5・Javascriptファイルを書き込み＆読み込む方法

Question

textarea１つとbutton１つを配置した画面があるとします。
buttonをクリックすると、同じ階層にあるdata.txtを読み込みんでtextareaに表示させたいのですが、html5もしくはjavascriptでこのような動作を行う事は可能でしょうか？
また、その逆に、buttonをクリックするとtextareaの内容をdata.txtに書き込むというやり方も知りたいですm(_ _)m

可能であれば、やり方を記述して頂けると助かります。
どうぞよろしくお願い致します。

Answer 1

htmlと同じ階層ということはサーバ側ですよね？
HTML5とJavaScriptだけではサーバ側のファイルを編集することはできないです

PHPなどのサーバ側で処理するプログラムを用意してボタンを押したら サーバにデータを送って PHPでファイルに書き込むとすればできます

読み込みならできます
古いブラウザ気にしないならこんな感じです

var textarea = document.querySelector("textarea")
fetch("./data.txt").then(e => text()).then(e => (textarea.value = e))

fetch のところは古いブラウザなら xhr で置き換える必要ありです

Comments

[fama]

ありがとうございます！
現在、Electronにて開発をしているのですが、ElectronはPHPが使用出来ますでしょうか？

[ryls-nmm]

electronでしたか
それならサーバではなくローカルのアプリなので編集もできます

ただ php じゃなくて node.js を使ってファイルを取り扱うことになります

ファイルまわりは英語ですがこの辺り参考です
https://nodejs.org/api/fs.html#fs_fs_readfile_file_options_callback

```javascript
var fs = require("fs")
// fs.readFile でファイル読み込み
// fs.writeFile でファイル書き込み
```
こんな感じで fs を require してメソッド呼び出せばいけると思います
同期処理がいいなら Sync がついてるバージョンにするといいです

[fama]

解説ありがとうございました！
ryls-nmmさんはelectornについてもお詳しいでしょうか？？

[ryls-nmm]

すみませんが electron はあまり詳しくはないです

[fama]

了解致しました。この度は丁寧な解説をして頂きましてありがとうございます。
electronにてソフトを開発しております為、何か今後もお聞きする事が出来ればと思い上記のような質問をさせて頂きましたm(_ _)m