Pages

Subscribe:

Ads 468x60px

2015年4月6日 星期一

[HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

資料來源

今天看了一下HTML5之前一直強調的功能,就是在Client端可以暫存更多的資訊,其實在Client端暫存資料並不是什麼新鮮事,Cookie就可以做到了,但Cookie在使用上有幾個不便利的地方:
  • Cookie在每個HTTP request送出時都會被送到Server端,不管你沒有要用到Cookie中的資訊,在某種程度上會拖慢執行的效能與浪費不必要的網路頻寬
  • Cookie送出的資料本身並沒有加密,因此除非我們用SSL一類的技術做加密,否則Cookie中不宜放任何重要的資訊
  • Cookies最大才4KB,不可能存太多資料

如果我們今天希望有更大的空間、更安全的保存、更少的頻寬浪費,在Client端找個地方暫存我們想暫存的數據似乎就變得非常重要了,在HTML5的Storage技術推出前其實已經有一些技術逐步在實現這樣的目標(包含透過Flash或Sliverlight),但到了HTML5才算是統一標準並集大成,目前支援HTML5 Storage的瀏覽器及版本如下:
image
原則上比較知名的瀏覽器在現行的版本中大多支援,連手機上的瀏覽器也漸漸的支援HTML5 Storage了,這對開發人員來說算是很好的一個消息。

HTML5的Storage主要分為兩種:localStoragesessionStorage,這兩者主要在生命週期上有較明顯的差別,localStorage的生命週期較長,原則上要等到透過Javascript將內容清掉或者使用者清空Cache時才會消失;而sessionStorage則是在Browser/Tab關閉時就會清空,下面先來看一個簡單的範例:

我先在畫面上拉兩個欄位:
image

當我按下Save時會將TextBox中的文字分別寫到locaoStorage跟sessionStorage中,並寫了一個讀取Storage的function:

1function loadStorage() {
2    document.getElementById("local").value = window.localStorage["local"];
3    document.getElementById("session").value = window.sessionStorage["session"];
4}
5 
6function saveToStorage() {
7    window.localStorage["local"] = document.getElementById("local").value;
8    window.sessionStorage["session"] = document.getElementById("session").value;
9}
然後我在兩個欄位分別輸入local跟session的文字,按下『Save』後會refresh畫面,並在body onload事件中會觸發localStorage的事件: 
image

我們可以發現網頁上的值確實被保存下來了,如果這時候我按下『OpenWin』的按鈕,透過showModalDialog的方式開啟另一個視窗,會發現兩個視窗的值相同,這邊先初步證明了localStorage/sessionStorage的值是被保存下來的: 
image

接著來求證一下sessionStorage的值只會保存在單一Tab中,我們用相同的網址開啟HTML5Storage這個頁面,我們可以發現localStorage的值仍然在,但sessionStorage的值已經消失了,而localStorage則在關閉瀏覽器再開啟時還是可以看的到,透過這樣簡單的範例大致上求證了一下兩者生命週期的差異,我測試過IE9、Chrome11、FF3.6: 

image 
image

適度地透過Browser的Storage可以加快網頁的載入速度也可提高用戶的使用體驗。

參考資料: 

Dive Into HTML5

Introduction to DOM Storage
HTML5 Web Storage, Using localStorage and sessionStorage Objects


關連文章



    回應


    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    看起來是解決了client端存資料的問題~有沒有缺點呢?
    2011/3/28 上午 09:31 | jain 回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    to jain :
    目前我覺得跟Cookie相似度極高,但可以存的內容較豐富,硬要說有什麼缺點,有人說是安全性,不過安全性的問題跟系統如何設計有關,我覺得稱不上他的缺點....

    2011/3/28 下午 10:30 | gipi 回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    gipi 你好,
    我把http://www.w3school.com.cn/tiy/t.asp?f=html5_webstorage_local_pagecount 這個範例copy到我的伺服器上時,在ie 下無法正常執行,但在w3c 的範例上又可以正常,請問這差別在哪裡? 謝謝。
    2014/8/19 上午 11:17 |  回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    你說靶範例copy到你的伺服器上,然後在IE執行是不行的,但同樣的code,你在w3c的網站上執行是ok的,在這過程,你用的都是IE嗎?

    如果你用了不同的瀏覽器,那你可以確認一下你的IE版本,並非所有的版本都支援此特性。
    Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.
    Note: Internet Explorer 7 and earlier versions, do not support Web Storage.
    2014/8/19 下午 04:43 | gipi 回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    是的,我是用 IE 10 來測試的,但剛才我把 localStorage 換成 sessionStorage 時,是可以正常執行的。
    2014/8/19 下午 05:22 |  回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    to 林 :
    貼一下你的程式碼可能快一些。
    2014/8/20 下午 09:42 | gipi 回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    gipi 大,以下是我的程式碼,在 Chrome 下執行正常,但在 IE10 執行時不會運作。

    01
    02<html>
    03<body>
    04 
    05<script type="text/javascript">
    06 
    07if (localStorage.pagecount)
    08    {
    09    localStorage.pagecount=Number(localStorage.pagecount) +1;
    10    }
    11else
    12    {
    13    localStorage.pagecount=1;
    14    }
    15document.write("Visits: " + localStorage.pagecount + " time(s).");
    16 
    17</script>
    18 
    19<p>刷新頁面會看到計數器在增長。</p>
    20 
    21<p>請關閉瀏覽器窗口,然後再試一次,計數器會繼續計數。</p>
    22 
    23</body>
    24</html>

    沒有留言:

    張貼留言