Google Chrome開發者工具教學

前言

嗨~終於來到開發者工具最後一篇文啦!今天要介紹的是Application，來各位同學請隨意打開一個頁面再開發者工具~就會看到下圖的樣子。

應該有看到很熟悉的字眼Cookies吧!~~(餅乾好吃好吃)~~當我們造訪從來沒進過的網站，時常都會跳出一個小視窗，就像是下圖左下角的部分。如果不擋住視線你各位一定不會理他，如果會擋住視線相信大家一定連看都沒看就會按下我知道了xD(~~因為我就是這樣啊)~~下面就來介紹這些到底是什麼東西吧

Application功用

Application最大功用就是在檢查所有載入資源，像是最常見的cookies或是session、local storage、cache(俗稱的快取)…等。以下只會針對我自己用過的功能做介紹噢~

Local Storage vs Session Storage

這兩個其實很相似，下表為兩者差異

Local Storage	Session Storage
儲存資料沒有時間限制，瀏覽器關掉就不會被清掉⇒ 除非手動刪除	儲存資料時間有限制，瀏覽器關掉就會被清掉
儲存容量較大	儲存容量比Local storage小但大於cookies

兩者的共通點就是他們都是key-value配對來達到儲存資料的目的

Local Storage 是個唯讀屬性，他無法直接修改，但可以透過JavaScript去撰寫修改的方法，如下圖如果按黃色的編輯按鈕就可以去做編輯，再按保存就會存入新的值到Local Storage

下面附上之前做的作品讓大家玩玩看~歡迎玩壞xD(~~玩壞不負責修理~~

Todo List: 連結按我

結論

做上面作品的時候還沒學到資料庫，所以就先用Local storage充當資料庫的概念，但他其實不是資料庫噢噢噢!雖然前面講了local storage 和 session storage，但我自己覺得在實務開發上cookies還是最常用的。像是今天登入了pchome頁面，電腦關掉之後隔天再打開pchome的頁面，基本上還會是登入的狀態(除非你登入的token過期就另當別論~)另外，有時候你查了iPhone這個商品，之後你可能就會在各個頁面看到iPhone的廣告，就是因為cookies也可以用來追蹤使用者的行為(真D可怕RRR)今天簡單講解就到這邊，大家掰掰~