###### tags: `HTML助教作業`

# 第六週作業

這禮拜要教同學的是localStorage和sessionStorage，而這次的作業應用也算常用，所以要請同學專心學，另外因為localStorage一個名稱只能裝一個值的關係，所以這邊也要先跟同學介紹JSON格式，因為作業會用到把一筆表單的資料先透過 **JSON.stringify() 轉成JSON字串，之後存進localStorage**，這就等同於**把字串存進localStorage而已**，只是我們存的是JSON字串，所以之後可以再利用**JSON.parse()把JSON字串轉成JSON格式**。

因為JavaScript的部分也上了兩、三個禮拜左右了，所以現在同學應該要很熟悉DOM的操作，在教學的時候，也可以適時地加上一些**ES6,7,8**的語法並跟同學們解釋，像是**Template Literals**、**Destructuring Assignment**等。

而本週的重點是localStorage，localStorage用的好可以增加UX體驗，另外也要小心localStorage可能會有社交攻擊的風險。

***學習重點***
- 學習localStorage和sesstionStorage用法和使用時機
- 學習如何讓多筆資料存進單一Storage
- 認識JSON格式

***重點語法***
- localStorage
- sessionStorage
- JSON.stringify
- JSON.parse

***作業要求***
設計一個表單(有CSS佳)，表單至少要有4個input，將所有input輸入文字後按下submit按鈕送出，送出後文字要顯示在表單底下，因送出的資料會存進localStroage，所以重新整理畫面以後，剛剛送出的文字也還會出現在畫面不會消失，這邊要檢查程式碼看有沒有人是利用4個不同名稱的localStorage來儲存資料的，要是有的話不能算通過。

<iframe src="https://codesandbox.io/embed/diliucizuoye-4gjz3?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="第六次作業"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>