用判斷產生正確歡迎訊息
修改檔案:script.js
完成後看見:空白時提醒輸入,有名字時顯示歡迎
CHAPTER 16 · PRACTICE WORKSPACE
可顯示作品清單並記住訪客名字的小功能
TASK STATUS
修改檔案:script.js
完成後看見:空白時提醒輸入,有名字時顯示歡迎
修改檔案:script.js
完成後看見:三項作品從資料產生為清單
修改檔案:script.js
完成後看見:重新整理後能讀回名字;清空並儲存後舊名字不會復活
WORKSPACE
已完成 TASK-02;先核對可見結果,再前往 TASK-03。
FOCUS TASK · TASK-03
比較:儲存資料與頁面初始化讀回資料是不同時機,必須分別驗證。
現在做:先在 script.js 的 saveName() 與初始讀取 做一次最小對照:只改這個責任並重新整理/操作,接著依「先輸入並儲存名字後重新整理,再清空名字儲存並重新整理,確認保存、讀回與清除三段行為。」重跑,記下前後差異。
預期:完成後能觀察到「重新整理後能讀回名字;清空並儲存後舊名字不會復活」,並說出儲存資料與頁面初始化讀回資料是不同時機,必須分別驗證。
證據:用前後截圖或口述比較「重新整理後能讀回名字;清空並儲存後舊名字不會復活」,指出這個小型實驗如何證明儲存資料與頁面初始化讀回資料是不同時機,必須分別驗證。
比較:本章的 portfolio-visitor 只保存名字字串;若改存物件,才需要 JSON.stringify() 與 JSON.parse(),不能直接假設讀回原本型別。
現在做:在 Application 面板查看 portfolio-visitor 的實際值,口述本章為什麼直接保存字串;再指出若保存偏好物件,哪一段需要序列化、哪一段需要解析。
預期:完成後能指出本章 localStorage 讀回的是字串,並說明物件資料要用 JSON.stringify()/JSON.parse();不把尚未寫入本章 Solution 的 JSON 當成已完成行為。
證據:用 Application 面板截圖與口述說明 portfolio-visitor 的字串值,以及物件資料與 JSON 文字之間需要序列化、解析的邊界。
完成條件:DONE-03:重新整理後能讀回名字;清空並儲存後舊名字不會復活
DATA & MEMORY
尚未儲存名字。
CHAPTER HANDOFF
接收:上一章已驗收的具名函數、輸入事件更新 DOM、空白 fallback 與 class 狀態切換。
本章交棒:空白/有效輸入判斷、works 陣列由迴圈交給 renderWorks() 產生清單,以及 portfolio-visitor 的 localStorage 保存與清除;第 17 章會在獨立輪播頁重用「資料陣列 → render → DOM」責任模式,不共用本頁檔案。
CONTINUE
前往 Solution,依要求完成「把名字存入並讀回 localStorage」。