課程目標
認識並且能使用 Cookie 相關功能
課程內容
大名鼎鼎的 cookie，很多人在科技新聞上都聽過
某某公司利用網頁 cookie 追蹤個資、某某公司偷偷用 cookie 分享個資
這類新聞提到的 cookie，就是本課在說的 cookie
目前為止的作業，你會發現只要重新整理網頁，畫面上的所有東西就都歸零回預設值了
因為我們說網頁 HTTP 協議是「無狀態」的，也就是每次打開網頁的「狀態」不會被保留
這樣的設計當然有好處以及方便的地方，因為每次打開網頁都是獨立事件、彼此不會互相影響，開發起來單純很多
但是在實務上，經常需要「有狀態」才能完成某些功能，例如「已登入帳號」的狀態，否則網站會變很難用
Cookie 技術就是為了這個原因而誕生
Cookie 主要有兩個特性
- cookie 的內容，主機端也能存取
- cookie 的內容，網頁重新整理之後還會保留
Cookie 會出現在 HTTP Request 內，一起送到主機
會員登入功能、各種廣告追蹤功能，就是這樣做到的
HTTP 協議不熟沒關係，反正就是前端工程師設定過 cookie 值之後，後端工程師也能在主機端拿到那些值就對了
注意，由於 cookie 會包含一些網站上的敏感資訊，jsfiddle 等等線上程式碼實驗工具、以及各種免費架站工具，幾乎通通都關閉了 cookie 功能
我目前找到一個可以用 cookie 的架站工具 https://replit.com/
本課請使用 replit 來跑範例程式碼、寫作業
註冊登入之後，點 Create -> Templates -> 選 HTML, CSS, JS 那個 -> Create Repl
就可以開始寫了，但是右邊的預覽視窗，因為是 iframe，一樣不能用 cookie
請點擊右上方的 Open in a new tab，就可以正常跑 cookie 功能了
來看一些範例程式碼吧
Your Age: <input type="text">
Your Name: <input type="text">
<button onclick="save()">Save</button>
<script>
if (document.cookie) {
alert(document.cookie);
var arr = document.cookie.split(';');
var myage = arr[0].split('=')[1];
var myname = arr[1].split('=')[1];
document.querySelectorAll('input')[0].value = myage;
document.querySelectorAll('input')[1].value = myname;
}
function save() {
var myage = document.querySelectorAll('input')[0].value;
var myname = document.querySelectorAll('input')[1].value;
document.cookie = 'myage=' + myage;
document.cookie = 'myname=' + myname;
alert('saved!');
}
</script>
這個範例中，輸入年齡、名字一次，接著重新整理網頁，會發現資料一樣存在欄位裡面，不用重新輸入！
存取值，都是透過 document.cookie 這個物件屬性，值的格式是 name=value
雖然 document.cookie= 寫了兩次，但第二次並不會蓋掉第一次的值，而是兩個都存進 cookie 了
（這個設計，很糟糕，沒錯，讓人看得很混亂。應該是瀏覽器的設計者，有他們的苦衷，我們先不細究原因，先知道怎麼用就好）
然後，讀取的時候，多個值會用分號 ; 隔開，所以讀取時我用了 .split() 這個字串函式
除此之外，cookie 還可以設定「使用期限」以及「限定網域」，但我這邊就先不示範
總之，cookie 的效果大概就是這樣，稍微理解就好。然後這些值，後端工程師在伺服器端，也會收到，就這樣！
如上所示，cookie 寫起來，有點麻煩
實務上，每次都這樣手寫，太囉唆，通常會直接找套件來用，我是用這款
https://github.com/js-cookie/js-cookie
用來操作 cookie 的 API，漂亮多了！
關於 cookie 的 debug 除錯，也要知道一下
打開瀏覽器開發者工具 -> Application -> Cookies 可以看到網站上有哪些 cookie，也可以直接在這邊修改、刪除 cookie
cookie 還有一些特性，以及大小限制、使用限制
這邊不細談，稍微知道怎麼用 cookie 就好
有興趣的話，請上網搜尋一下，多研究一些 cookie 的細節
課後作業
請使用 https://replit.com/ 來寫作業
假設你正在幫客戶寫一個「成人限制級網站」
頁面第一次打開會顯示蓋板警告，下方有兩個按鈕
警告︰您即將進入之網頁內容需滿十八歲方可瀏覽。
根據「兒童及少年福利與權益保障法」規定，本網站已於非闔家皆宜之網頁加以標示。若您尚未年滿十八歲，請點選離開。若您已滿十八歲，亦不可將本站之內容派發、傳閱、出售、出租、交給或借予年齡未滿18歲的人士瀏覽，或將本網站內容向該人士出示、播放或放映。
您年滿十八歲嗎？
[離開] [是，我已年滿十八歲]
- 點擊離開，把用戶跳轉到 google 首頁
- 點擊確認，就關閉蓋板警告，在網頁上顯示一張美女 or 帥哥圖片：參考圖庫 https://unsplash.com/
- 只要按過確認，重新整理之後，蓋板警告就不會再跳出來
做出以上功能，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
作業繳交 https://codelovev1.hungye.repl.co/
差點忘記交作業 https://replit.com/@evon5995/GigaDeadPort#index.html
交作業 https://replit.com/@superyngo1/Cookie-Xiang-Guan-Gong-Neng?v=1
https://replit.com/@johnny092956002/cookie?v=1 交作業
交作業 https://replit.com/@kitty90508s/cookie
交作業，再麻煩站長了，謝謝! https://replit.com/@melody183030/cookie?v=1
https://05-01-cookies--zoeylai1.repl.co/ 交作業~
作業繳交
https://html-css-js--peterbug8564.repl.co/
交作業 https://replit.com/@birdiewu/DarkvioletClutteredDigits?v=1