HTML5 Java 前端工程師

HTML5瀏覽器儲存功能更勝cookies!

2019-06-06

HTML5瀏覽器儲存比cookies更優的來了!

 

HTML5瀏覽器儲存比cookies更優的來了!
HTML5瀏覽器儲存比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,

前端工程師 只要把以上

Javascript 語法中的 「localStorage」 替換成 「sessionStorage」 即可。

 

相關文章

 

前端工程師的HTML5入門課程:7種內容模組

 

前端工程師HTML5的入門課程-audio音訊嵌入元素

 

有利於SEO的HTML5新語意元素排版,還不快學起來!

 

不管是聲音或圖像,google人工智慧的辨識功能一手包辦!

 

前端工程師分不出這個就掉漆了!! Class和ID哪裡不一樣?

 

2019最熱門的前十大程式語言, 給初學者的你一條明燈!

 

地表最強偵測機!Google Vision API

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料