コードの内容が正しく理解出来ているかを検証していただけないでしょうか。

「ＨＴＭＬ５プロフェッショナル認定試験レベル２スピードマスター問題集Ｐ２１２問５－２２」より。

１．ユーザーが選択した画像ファイルをimg要素に設定して表示する。
２．ブラウザを閉じた後に再度同一ページにアクセスした際は、選択した画像でデータを取り出してimg要素に表示させる。

<input type="file" id="uploader">
<img src="no-image.png" alt="icon" id="icon">

window.addEventListener("load", function () {
  var icon = localStorage.getItem("icon");
  if (icon) {
    document.querySelector("#icon").src = icon;
  }
});

document.querySelector("#uploader").
addEventListener("change", function (){
  var file = document.querySelector("#uploader").files[0];
  var reader = new FileReader();

  reader.onload = function () {
    document.querySelector("#icon").src = reader.result;
    localStorage.setItem("icon", reader.result);
  };

  reader.readAsDataURL(file);
});

「自分なりの解釈」
(1) ブラウザを閉じた後に再度アクセス。
window.addEventListener("load",

(2) Web Storageは同一オリジンにのみ参照可能な機能を利用して、
if文と併せて同一ページにアクセスしているかどうかを検証している。
var icon = localStorage.getItem("icon");
if(icon) {}

(3) 選択した画像データを取り出してimg要素に表示させる。
var icon = localStorage.getItem("icon");
document.querySelector("#icon").src = icon;

(4) ユーザーが選択。
document.querySelector("#uploader").
addEventListener("change",

(5) input要素からファイルを取り出している。
var file = document.querySelector("#uploader").files[0];

(6)ユーザーが選択した画像ファイル。
var reader = new FileReader();

(7)ユーザーが選択した画像ファイルを表示している。
document.querySelector("#icon").src = reader.result;

(8)画像ファイルをlocalStorageに保存している。
localStorage.setItem("icon", reader.result);

(9)ブラウザを閉じた後も利用するため、画像ファイルをreadAsDataURLとして読み込む。
reader.readAsDataURL(file);

m.ts10806

2021/01/06 05:52

どのようにそのような理解に至ったのでしょうか。根拠ないままだと「本当に理解しているかどうか」は見えにくいかと。

m.ts10806

2021/01/06 06:09

むしろ「要件を満たすコードとなっているか判断できるかどうか」のほうが大事ではないでしょうか。

gentaro

2021/01/06 07:02

質問になってないただの作業依頼。こういうサイトで有償で先生雇うか学校にでも通うべき。 https://menta.work/

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

回答2件

個人的な意見ですけど、質問者さんのような理解の仕方はプログラムをする過程においては『よい考え方ではない』と思います。

プログラムするといってもやっていることはおよそ
・値の保持
・任意のタイミングにおける関数の実行
だいたいこの２つ程度です。

例えば１番の
ブラウザを閉じた後に再度アクセス
というのはプログラムの命令文とは一切関係のない質問者さんの思い、願望であり
実際に書かれていることは
window.addEventListener("load",function～なので
要するに『画面のロード時に中身を実行してね』ということだけです。

プログラム命令を組み合わせた結果に
『ブラウザを閉じた後に再度アクセス』という要件が得られるのであって、その文自体に要件を満たす機能があるわけではないです。

理解している内容と書いてあるプログラム命令とに解離があると、自力で書くときに難しくなるので
最初のうちは命令に沿った理解をして、実現したい要件は分けて考えた方がいいと思います。理解に思いが先行しすぎという感じがします。

ここまで書いておいてあれですけど正直うまくいえてる気がしませんm(._.)m

投稿2021/01/06 06:46