HTML5 Web Storage使用介紹

今天來說說HTML5的新東西:Web Storage

Web Storage簡介:

  1. 一個能讓網頁把資訊儲存在本地端的技術
  2. 比起前輩cookie的儲存量,web storage的儲存量大了許多
  3. 資訊儲存僅限本地端,不會因為頁面進行request就伺服器端與本地端的兩端旅行(cookie會)
  4. 分為local storage和session storage兩種
  5. 瀏覽器支援部份:
    1. Google chrome:4.0
    2. Ie:8.0
    3. Firefox:3.5
    4. Safari:4.0
    5. Opera:11.5
  6. 沒有六了只是覺得ie8居然支援有點不可思議

1.開始之前

在開始介紹之前,先說說如何判斷使用者瀏覽器支不支援Web Storage。雖然目前看來瀏覽器「幾乎」(瀏覽器詳細支援可以看這邊:https://caniuse.com/#search=web%20storage)都支援,但難保使用者沒更新瀏覽器,多點判斷還是好的。

可以這麼判斷:

  1. //Check if browser support Local Storage
  2. if(typeof(Storage) ==”undefined”){
  3. alert(“LocalStorage does not support on your browser Please upgrade your browser in order to run this application”);
  4. }

(2018-9-6 新增範例)

用Chrome console示範,假設有支援的話會是這樣:

 

html5-web-storage-typeof-chrome
[圖一]chrome示範
IE11的話:

html5-web-storage-typeof-ie11
[圖二]IE11示範

2. 兩種 storage 的不同

剛剛說過web storage分成兩種:local storage和session storage,同樣都是將資訊儲存在本機端,兩者有那麼一點點不同,扣掉這一點點的不同,其實這兩種真的蠻像的。

2.1.異頁同步

Local storage 資料可異頁同步。例如網站A在分頁A1存了一筆資料,到了分頁A2可以拿來使用。當然,不同瀏覽器及無痕不在此範圍內。

Session storage 則無法異頁同步,分頁A1的資料到了分頁A2是無法使用的。

2.2.儲存時間

Local storage 除非執行清除的程式,否則資料一直都在,就算關掉全部的分頁,他還是在。

Session storage 則是關掉分頁資料就不見了。

以上兩點算是Local storage和Session storage相當不同的點,各位可以依造自己的需求選擇適合的使用。

3.兩種 storage 相同點

有異就有同,其實相同點很多。

3.1.資料設置

在資料設置部分,兩個storage設置資料的方式倒是一樣:

  1. localStorage.setItem(“name”,”john”);
  2. sessionStorage.setItem(“name”,”john”);

其他設置的方法(以local storage示範):

  1. localStorage[“name”] = “john”;
  2. localStorage.name = “john”;

第一次使用可能會有疑慮「這真的有資料嗎?」,如果還是有疑慮,可以打開網頁的console,Window電腦請按下F12,或是在頁面上按右鍵,選擇「檢查(chrome)、檢查元素(Firefox)」;Mac請從檢視/開發人員選項/開發人員工具,或是同樣在畫面上右鍵,選擇「檢查(chrome)、檢查元素(Firefox)或檢閱元件(Safari)」。

打開後,在console裡輸入localStorage/sessionStorage(通常打到local或是session就可以按向右方向鍵補完),輸入完畢後按下Enter,就可以看到目前localStorage/sessionStorage儲存的資料了。

當然這只是拿來檢查資料是否有設置成功噢,別拿去別人的網站玩噢w

3.2.資料提取

資料提取部分,兩個storage的方法也是一樣,但提取資料的方法也不只一種(以下用local storage示範):

  1. name = localStorage.name;
  2. name = localStorage.getItem(“name”);
  3. name = localStorage[“name”];

3.3.資料移除與清除

在使用途中可能會遇到需要將某筆資料移除或所有資料清除的時候,特別是使用local storage進行異頁會員資料同步時。

要移除單筆資料時,可以使用removeItem:

  1. localStorage.removeItem(“name”);
  2. sessionStorage.removeItem(“name”);

至於移除所有資料,可以使用clear:

  1. localStorage.clear();
  2. sessionStorage.clear();

3.4.資料長度

要知道現在在Storage裡總共有幾筆資料可以使用 length:

  1. localStorage.length;
  2. sessionStorage.length;

以上就是在使用兩個Storage時常用,也最重要的幾個方法。除了這幾個方法外其實還有,只是不常用,有興趣者可以在網頁 console 裡打上 localStorage 或是 sesstionStorage 就會出現所有可以使用的方法了。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.