Google Chrome開發者工具教學 - Application


前言

嗨~終於來到開發者工具最後一篇文啦!今天要介紹的是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)今天簡單講解就到這邊,大家掰掰~


Reference

Chrome 开发工具之 Application

Web Storage API - Web APIs | MDN

#google chrome #開發者工具






你可能感興趣的文章

W23 + W24_直播檢討

W23 + W24_直播檢討

JS30 Day 16 筆記

JS30 Day 16 筆記

JS30 Day 20 筆記

JS30 Day 20 筆記






留言討論