JS、HTMLでテキストファイルに書き込めますか？また書き込んだ文字を再度HTMLの表示エリアに文字を表示できますか？

HTMLで書き込んだテキストデータをファイルに書き込むには

データやログをファイルなどに書き込むには、
File APIというものを使わなければいけないと言われ調べてみましたが
イマイチわかりませんでした。

したいこと

JSでHTMLから書き込まれた文章を一度テキスト.txtにログとして保存してそこから更に一度保存した内容を取り出してHTMLで表示させたい。

図：HTML（書き込み）＞JS処理・ログ制作から＞HTML出力。
課題｛
１：HTMLから入力してテキストデータの情報をJSに回して課題２に繋げる。（参考中）
２：JSでテキストデータをファイルに書き込む**（成功）**
３：ファイルに書き込まれた情報をHTMLに表示。（参考中）

条件

File APIを使わなければならない
参考にしたサイトFile APIについて、

テキストデータをファイルに書き込む方法
ファイルに書き込むことはできましたがダウンロードができてファイルを開いた動作でした。

js
1<a id="btn" download="sample.txt">ダウンロード</a>
2
3<script type="text/javascript">
4
5const btn = document.getElementById('btn');
6 
7btn.addEventListener('click', function() {
8      const blob = new Blob(['こんにちは'], { "type" : "text/plain" });
9 
10      btn.href = window.URL.createObjectURL(blob);   
11})
12
13</script>

とても参考になったのですが、
HTML上に表示できないのでしょうか。。。

ファイルに書き込んだ文字を再度HTML（テキストエリア）に表示したいです。
ファイルから情報を取り出すことは可能なのでしょうか。
ファイルの中身を出力する方法ではできるらしいのですが、
出力に失敗してしまいました。

html
1<form name="myform">
2 
3    <input name="myfile" type="file" /><br/>
4    <textarea name="output" cols="80" rows="10"></textarea>
5 
6</form>

js
1var form = document.forms.myform;
2 
3form.myfile.addEventListener( 'change', function(e) {
4 
5    var result = e.target.files[0];
6 
7    //FileReaderのインスタンスを作成する
8    var reader = new FileReader();
9  
10    //読み込んだファイルの中身を取得する
11    reader.readAsText( result );
12  
13    //ファイルの中身を取得後に処理を行う
14    reader.addEventListener( 'load', function() {
15    
16        //ファイルの中身をtextarea内に表示する
17        form.output.textContent = reader.result;    
18    })
19 
20})

そもそもFile APIとはなんなのでしょうか、
JSに依存する言語なのでしょうか、それともJSにおける方式や名称なのでしょうか、
すくなくても、「ファイルの読み込み」に対応させることだ、ということは理解できました。

まだまだ勉強しなければならない部分が多いですが
私に現段階で認識違いや誤解している部分があれば指摘してくれると本当に嬉しいです。

kero1209

2019/10/17 16:14

やりたい事はクライアント側に情報を保存してそれをまた読みたいという事でしょうか？

o_0

2019/10/17 16:17

クライアントとはブラウザー上でHTMLに入力する人のことであってますか。。。

o_0

2019/10/17 16:21

おそらくそれで合ってると思います。違ってたらごめんなさいクライアント側に入力させた情報をHTMLに表示させたいです、

m.ts10806

2019/10/17 21:37

クライアントとは、ざっくり言うと利用者のコンピュータ側のことです。 https://wa3.i-3-i.info/word145.html

行動規範の内容に同意します

回答2件

任意のファイルを書き換えることは難しいですが
localstorageに取っておいて再利用することは可能です

投稿2019/10/18 00:24

編集2019/10/18 00:25

yambejp

総合スコア114839

おそらくですが、文字コードの原因のように思えます

以下の手順を試していただけないでしょうか

１．
＞ファイルに書き込まれた情報をHTMLに表示。（参考中）
上記で保存したテキストファイルをSJISで改めて保存

これより下は、以下のサイトさんを参考に致します
→②ファイルの内容を読み取る　項目を参考にしました
http://tokidoki-web.com/2013/08/file-apiでローカルファイル情報取得してやんよ/

２．以下のコードをhtml形式で「"UTF8"」で保存

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5<title>引用元のサイトさんのソースです</title>
6<script type="text/javascript" charset="utf-8" src="../analytics.js"></script>
7</head>
8<body>
9<p>テキストファイルを選択してください</p>
10	<input id="afile" type="file" multiple><br>
11	<br><textarea id="info"></textarea>
12    
13    <script type="text/javascript">
14		$("#afile").onchange = function(evt){
15			var file = evt.target.files[0];
16			if(!file.type.match(/text/)){
17				alert('テキストファイルを' + '選んでください。');
18				return;
19			}
20			var reader = new FileReader();
21			reader.onload = function(evt){
22				$("#info").value = evt.target.result;
23			}
24			
25			reader.readAsText(file, "Shift_JIS");
26		}
27		
28		function $(id) {
29			return document.querySelector(id);
30		}
31	
32	</script>
33    </body>
34</html>
35

３．「２で作ったhtmlファイルを適当なブラウザで開く」

４．ファイル選択で「１」で保存したSJISファイルを選択

５．ファイル選択下のテキストエリアにファイルの内容が読まれるはずです

こちらの挙動を応用に、質問主の求める処理ができないでしょうか？

質問主が「反映されない」と述べている原因が、
HTMLやJavaScript、および読み込むテキストファイルの文字コードの原因によって起こってる可能性があります。

もしかすると「２．」の

は

でもよかったかもしれません…

そもそもFile APIとはなんなのでしょうか

これに関しては、説明に自信がありません…

ワタシから説明できるのは、HTML5で標準化されたファイル操作の処理…としか。

その目的は悪意あるデベロッパーがユーザーの意図しないファイル操作をさせないよう
制限を加えた上でのファイル実装の方法を提供する規格…なのでしょうか…

こちらの説明、有識者の説明が聴きたいです…

投稿2019/10/17 16:46

編集2019/10/17 16:57

hermit19901127

総合スコア368

o_0

2019/10/17 19:20

hermit19901127さん本当にありがとうございます！早速試してみたいと思います！＞HTML5で標準化されたファイル操作の処理　｝なるほど　十分納得できますｗその理由も↓ ＞悪意あるデベロッパーがユーザーの意図しないファイル操作をさせないよう制限を加えた。　｝言われてみればそうだなって思いました！なのでhermit19901127さんもっと自信持っていいかもしれませんよ！ありがとですｗ指摘されたように今から試したいと思いますｗもしまたわからないことがあったら聞いていいのかわかりませんが、極力自力で理解してできるように頑張りたいです！またなにか指摘してくれると本当に助かります！

行動規範の内容に同意します

あなたの回答