踏入前端工程師領域必備的九堂 HTML5 課(七)-Web Storage 瀏覽器儲存簡介
踏入前端工程師領域必備的九堂 HTML5 課(七)-Web Storage 瀏覽器儲存簡介

 

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 入門課 (一)

 

新手前端工程師需要的 HTML5 入門課 (二)

 

新手前端工程師需要的 HTML5 入門課 (三)

 

新手前端工程師需要的 HTML5 入門課 (四)

 

新手前端工程師需要的 HTML5 入門課 (五)

 

新手前端工程師需要的 HTML5 入門課 (六)

 

新手前端工程師需要的 HTML5 入門課 (八)

 

新手前端工程師需要的 HTML5 入門課 (九-上)

 

新手前端工程師需要的 HTML5 入門課 (九-下)

arrow
arrow

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()