前端工程師入門HTML5就靠這些撇步!(7)瀏覽器儲存簡介
今天就來介紹HTML5才有的新功能 Web Storage!只能儲存4kb的cookies掰掰!
在 HTML5 之前，前端工程師要在用戶端瀏覽器儲存資料，會使用 cookies。HTML5 新增了 Web Storage 功能，取代了只能儲存 4kb 的 cookies。
Web Storage 的優點 (與 cookies 比較)：
🔹更安全
🔹過往儲存於 cookies 中的資料，會在用戶端瀏覽器與伺服器之間運行：因為每次用戶端瀏覽器送出 request 至伺服器時，cookies 就會跟著被夾帶，就會占用到頻寬，而 Web Storage 因為純粹運作於用戶端用戶端瀏覽器，不會在用戶端瀏覽器與伺服器之間運行，所以就不需要占用網路頻寬。
🔹以往 cookies 最多只能儲存 4KB 的資料，而 HTML5 Web Storage 的儲存空間大得多，其容量依各個瀏覽器而不同，但是一般都至少有 5MB。
🔹速度更快
Web Storage 有分兩種：sessionStorage() 和 localStorage()。二者的最大的差異在於「生命週期長短」。
數據的生命期
localStorage：儲存於 localStorage 的資料可永久保存，可以跨瀏覽器分頁、新視窗、甚至是關閉瀏覽器後再打開，localStorage 仍然會存在，永不逾期，除非被清除。
sessionStorage：sessionStorage 的生命周期只存在於瀏覽器的單一分頁，也就是另開新分頁的話，又是一個新的 sessionStorage。除非另外設定逾期時間，否則 sessionStorage 會於分頁、瀏覽器等被關閉時被清除。 ※以下的語法通通都是寫在 Javascript裡
有效範圍
儲存於 local storage 的資料可以跨分頁（tab）運作，session storage 則不行。
用法
sessionStorage 和 localStorage 的語法都簡單且類似。其資料都是以 key/value pairs 的形式儲存。
儲存資料
localStorage.setItem("Key名稱", "字串值");
取得資料//this will print the value
alert(localStorage.getItem("Key名稱"));
移除資料localStorage.removeItem("Key名稱");
移除所有資料localStorage.clear();
以上的語法是以 localStorage 為例來示範，若是用儲存於 sessionStorage，把以上語法中的 「localStorage」 替換成 「sessionStorage」 即可。👉 延伸閱讀區：
前端工程師入門HTML5就靠這些撇步!(8上)製作拖曳元素
前端工程師入門HTML5就靠這些撇步!(8下)製作拖曳元素
前端工程師入門HTML5就靠這些撇步!(9)地理位置定位
網路行銷課程進階(七)-擴大主題關鍵字,讓更多人看到你!!
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
是日救星!人工智慧語音辨識 APP 雅婷逐字稿,台灣國語也逃不過雅婷的掌心!
中國IT教育領導品牌 達內教育集團第一家海外授權中心
