第 16 堂｜把填到一半的內容留下來
手動儲存、還原與清除本表單草稿，分清本機保存與真正送出。
本機草稿不是案件保存
三個操作都明確，不自動載入或保存。
先準備
- 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
- 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
- 固定key與允許五欄清單，自己的虛構草稿測試值
- 依本機HTTP指南啟動正常表單8791，故障副本另用8792；不要覆蓋原作品
localStorage只在同一瀏覽器保存，手動儲存與還原要明確，不自動送出、不碰其他網站資料。
先完成本機HTTP預覽：含下載、Windows／macOS指令與停止方式
一起拆解：草稿與送出是兩件事
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
正常表單五欄填A，手動儲存後重新整理，再按還原。
key = "qinghe.inquiryDraft.v1"
{ version:1, savedAt:"ISO時間", fields:{ name,email,serviceId,subject,message } }這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 在自己的8791 HTTP正常預覽使用虛構資料，不依賴file網址的儲存行為。
- 儲存只寫本key；重新整理不自動套值，按還原才核對版本、型別與服務。
- 逐欄比對A與字數；清除只移除草稿，不清目前輸入或其他鍵。
正常應看到
同瀏覽器可手動找回五欄，畫面仍清楚說尚未送出。
常見錯誤對照
把草稿保存寫成「案件已成立」會把本機資料誤當後端案件。
先預測，再說明原因
在另一個埠找不到草稿時，為何不能立刻判斷資料被刪除？
跟著觀察
- 先讀「草稿與送出是兩件事」的輸入，指出本關實際檔案或資料。
- 在另一個埠找不到草稿時，為何不能立刻判斷資料被刪除？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
做完，自己確認
- 三個操作都明確，不自動載入或保存。
- 能指出指定檔案與作用範圍。
把這次填寫存成草稿
三個操作都明確，不自動載入或保存。
先準備
- 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
- 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
- 固定key與允許五欄清單，自己的虛構草稿測試值
- 依本機HTTP指南啟動正常表單8791，故障副本另用8792；不要覆蓋原作品
親手填一份虛構五欄按儲存，重整後再按還原。
跟著做
- 核對五欄與固定key，不加入身份或管理資料。
- 請AI加三個手動操作，捕捉儲存與解析錯誤。
- 自己儲存、重整、還原、清除，再核對所有欄位。
建立手動草稿儲存還原
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
- 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
- 固定key與允許五欄清單，自己的虛構草稿測試值
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 請AI加三個手動操作，捕捉儲存與解析錯誤。
- 成功還原五欄與計數一致，清除不動其他資料。
- 4．自己檢查結果
- 三個操作都明確，不自動載入或保存。
- 成功還原五欄與計數一致，清除不動其他資料。
建立手動草稿儲存還原 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第15堂五欄表單，不接後端。只儲存虛構聯絡資料，草稿key固定qinghe.inquiryDraft.v1，資料只有version:1、savedAt與五欄fields，不含密碼、驗證或管理內容。只在本機HTTP預覽，手動按儲存才寫入；不是跨裝置、不是案件送出。
本次任務：只在現有五欄表單新增手動儲存／還原／清除三個type=button。key=qinghe.inquiryDraft.v1，內容version:1、ISO savedAt與五欄fields；不儲存密碼、憑證或管理內容，不自動存或載入。還原驗證JSON、version、字串型別與服務選項，不合或storage拒絕要提示且保留當前值；成功還原需更新需求計數。清除只removeItem本key，不localStorage.clear，不清目前欄位。標示只在此瀏覽器、尚未送出。這關先不加時間文字與覆蓋確認，列五欄重整核對。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
保存時間與未保存輸入分開
提示使用實際savedAt，不冒稱未儲存資料已保存。
先準備
- 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
- 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
- 現有草稿程式、A與B虛構資料與實際步驟
顯示真實savedAt；正在填的內容與草稿不同時，先確認才能覆蓋，取消則原值不變。
一起拆解：取消要真的保留B
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
已保存A，再把目前主旨改成B但不按儲存，然後按還原。
草稿A + 目前B → 顯示確認
取消 → 目前仍B
確認 → 五欄回A，字數同步這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 從savedAt讀真實時間，不每次顯示現在時間假裝剛保存。
- 先解析與核對草稿，再顯示頁內確認；取消不能套用任何欄位。
- 各測取消與確認，最後核對姓名、服務及字數，不只看主旨。
正常應看到
取消保留B；確認才覆蓋回A，未送出提示仍在。
常見錯誤對照
先套用A再問是否還原，即使按取消也已丟失B。
先預測，再說明原因
確認面板出現時，欄位應保持A還是B？請先預測。
跟著觀察
- 先讀「取消要真的保留B」的輸入，指出本關實際檔案或資料。
- 確認面板出現時，欄位應保持A還是B？請先預測。
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
做完，自己確認
- 提示使用實際savedAt，不冒稱未儲存資料已保存。
- 能指出指定檔案與作用範圍。
還原前，先保留選擇權
提示使用實際savedAt，不冒稱未儲存資料已保存。
先準備
- 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
- 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
- 現有草稿程式、A與B虛構資料與實際步驟
親手存A再改B，先取消一次、再確認一次。
跟著做
- 保存A並記時間，接著手動改成B但不儲存。
- 請AI只加時間提示與還原確認，不改資料結構。
- 還原先取消保留B，再確認回A；測清除及字數。
加上保存時間與還原確認
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
- 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
- 現有草稿程式、A與B虛構資料與實際步驟
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 請AI只加時間提示與還原確認，不改資料結構。
- 取消保留B，確認才回A，五欄與計數同步。
- 4．自己檢查結果
- 提示使用實際savedAt，不冒稱未儲存資料已保存。
- 取消保留B，確認才回A，五欄與計數同步。
加上保存時間與還原確認 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第15堂五欄表單，不接後端。只儲存虛構聯絡資料，草稿key固定qinghe.inquiryDraft.v1，資料只有version:1、savedAt與五欄fields，不含密碼、驗證或管理內容。只在本機HTTP預覽，手動按儲存才寫入；不是跨裝置、不是案件送出。
本次任務：只在既有草稿操作加真實savedAt本地時間提示與覆蓋確認。還原時若目前有未儲存非空內容且與草稿不同，顯示頁內原生按鈕「確認還原」「取消」；取消保留目前值，確認才套用草稿並更新字數。保留固定key、資料結構、三個手動操作與錯誤容錯，不自動保存或在載入時還原，不加全頁彈窗。列存A改B、取消、確認、重整與清除回歸。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
資料不可信時先保留目前輸入
有效草稿能還原，壞JSON與未知服務仍安全拒絕。
先準備
- 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
- 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
- fault-L16的readDraft流程與有效草稿測試值、目前服務選項
壞JSON、舊版本或未知服務不能照單套用。故障副本另有解析後錯誤覆寫服務值，應修來源，不放寬選項驗證。
一起拆解：故障草稿與正常草稿分開
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
故障頁8792與測試頁共用專屬faultL16 key；正常頁8791保留原key。
正常：qinghe.inquiryDraft.v1
故障：qinghe.inquiryDraft.faultL16.v1
故障原因：saved.fields.serviceId="retired-service"這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先在故障資料頁放有效brand草稿，回故障表單按還原。
- JSON原本有效，卻被程式覆寫成舊服務；只移除這個錯誤賦值，保留故障專屬key。
- 測有效、壞JSON、未知服務；回正常表單還原A，確認沒有被測試資料覆蓋。
正常應看到
有效故障草稿可還原，壞資料仍被拒絕，正常草稿保留。
常見錯誤對照
放寬服務驗證接受retired-service，會讓真正未知資料也過關。
先預測，再說明原因
為何只把fault檔案放另一個資料夾，仍不足以保證儲存隔離？
跟著觀察
- 先讀「故障草稿與正常草稿分開」的輸入，指出本關實際檔案或資料。
- 為何只把fault檔案放另一個資料夾，仍不足以保證儲存隔離？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
做完，自己確認
- 有效草稿能還原，壞JSON與未知服務仍安全拒絕。
- 能指出指定檔案與作用範圍。
草稿壞了，表單也要能用
有效草稿能還原，壞JSON與未知服務仍安全拒絕。
先準備
- 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
- 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
- fault-L16的readDraft流程與有效草稿測試值、目前服務選項
故障表單與測試頁使用專屬 qinghe.inquiryDraft.faultL16.v1，正常草稿鍵 qinghe.inquiryDraft.v1 保留。請先下載並在8792開自己的draft-test.html，放有效虛構草稿後按頁面連結回故障表單。下列線上入口僅供看畫面，測試鍵已隔離，不會覆寫正常草稿。
跟著做
- 在獨立fault-L16使用虛構測試資料，保留正常草稿。
- 請AI只移除解析後retired-service覆寫，保留錯誤提示與驗證。
- 測有效、壞JSON、未知服務、清除單key及儲存拒絕備援，記實測或受控測試範圍。
修復草稿的錯誤服務覆寫
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
- 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
- fault-L16的readDraft流程與有效草稿測試值、目前服務選項
- 故障專屬key=qinghe.inquiryDraft.faultL16.v1；保留此隔離設定，不改正常草稿鍵
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 請AI只移除解析後retired-service覆寫，保留錯誤提示與驗證。
- 不清其他鍵、不丟目前輸入，錯誤後仍可填表。
- 4．自己檢查結果
- 有效草稿能還原，壞JSON與未知服務仍安全拒絕。
- 不清其他鍵、不丟目前輸入，錯誤後仍可填表。
修復草稿的錯誤服務覆寫 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第15堂五欄表單，不接後端。只儲存虛構聯絡資料，草稿key固定qinghe.inquiryDraft.v1，資料只有version:1、savedAt與五欄fields，不含密碼、驗證或管理內容。只在本機HTTP預覽，手動按儲存才寫入；不是跨裝置、不是案件送出。
本次任務：獨立故障程式讀取有效草稿後，解析下一行卻把saved.fields.serviceId硬改retired-service，導致正常還原也被拒絕。依附流程與選項只移除這一個錯誤賦值，保留JSON／版本／型別／服務驗證與storage try/catch；不能放行不存在服務。提供最小差異與有效還原、壞JSON不套值、未知服務、拒絕儲存、單key清除保留其他鍵的測試表，未實測或僅受控模擬需分開標。故障練習專屬key為qinghe.inquiryDraft.faultL16.v1，保留它；正常表單key仍為qinghe.inquiryDraft.v1，不因修復而改鍵或清其他資料。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
留下自己的檢查紀錄
記下實際做過的操作、差異與結果。還沒做的項目寫「待完成」。
勾選與筆記只保存在這個瀏覽器。
重設只清除勾選，網站檔案與檢查筆記都保留。