今天看了一下HTML5之前一直強調的功能，就是在Client端可以暫存更多的資訊，其實在Client端暫存資料並不是什麼新鮮事，Cookie就可以做到了，但Cookie在使用上有幾個不便利的地方：
如果我們今天希望有更大的空間、更安全的保存、更少的頻寬浪費，在Client端找個地方暫存我們想暫存的數據似乎就變得非常重要了，在HTML5的Storage技術推出前其實已經有一些技術逐步在實現這樣的目標(包含透過Flash或Sliverlight)，但到了HTML5才算是統一標準並集大成，目前支援HTML5 Storage的瀏覽器及版本如下：
原則上比較知名的瀏覽器在現行的版本中大多支援，連手機上的瀏覽器也漸漸的支援HTML5 Storage了，這對開發人員來說算是很好的一個消息。
HTML5的Storage主要分為兩種：localStorage與sessionStorage，這兩者主要在生命週期上有較明顯的差別，localStorage的生命週期較長，原則上要等到透過Javascript將內容清掉或者使用者清空Cache時才會消失；而sessionStorage則是在Browser/Tab關閉時就會清空，下面先來看一個簡單的範例：
我先在畫面上拉兩個欄位：
當我按下Save時會將TextBox中的文字分別寫到locaoStorage跟sessionStorage中，並寫了一個讀取Storage的function：
然後我在兩個欄位分別輸入local跟session的文字，按下『Save』後會refresh畫面，並在body onload事件中會觸發localStorage的事件：
我們可以發現網頁上的值確實被保存下來了，如果這時候我按下『OpenWin』的按鈕，透過showModalDialog的方式開啟另一個視窗，會發現兩個視窗的值相同，這邊先初步證明了localStorage/sessionStorage的值是被保存下來的：
接著來求證一下sessionStorage的值只會保存在單一Tab中，我們用相同的網址開啟HTML5Storage這個頁面，我們可以發現localStorage的值仍然在，但sessionStorage的值已經消失了，而localStorage則在關閉瀏覽器再開啟時還是可以看的到，透過這樣簡單的範例大致上求證了一下兩者生命週期的差異，我測試過IE9、Chrome11、FF3.6：
適度地透過Browser的Storage可以加快網頁的載入速度也可提高用戶的使用體驗。
參考資料：
Dive Into HTML5
Introduction to DOM Storage
HTML5 Web Storage, Using localStorage and sessionStorage Objects
- Cookie在每個HTTP request送出時都會被送到Server端，不管你沒有要用到Cookie中的資訊，在某種程度上會拖慢執行的效能與浪費不必要的網路頻寬
- Cookie送出的資料本身並沒有加密，因此除非我們用SSL一類的技術做加密，否則Cookie中不宜放任何重要的資訊
- Cookies最大才4KB，不可能存太多資料
如果我們今天希望有更大的空間、更安全的保存、更少的頻寬浪費，在Client端找個地方暫存我們想暫存的數據似乎就變得非常重要了，在HTML5的Storage技術推出前其實已經有一些技術逐步在實現這樣的目標(包含透過Flash或Sliverlight)，但到了HTML5才算是統一標準並集大成，目前支援HTML5 Storage的瀏覽器及版本如下：
原則上比較知名的瀏覽器在現行的版本中大多支援，連手機上的瀏覽器也漸漸的支援HTML5 Storage了，這對開發人員來說算是很好的一個消息。
HTML5的Storage主要分為兩種：localStorage與sessionStorage，這兩者主要在生命週期上有較明顯的差別，localStorage的生命週期較長，原則上要等到透過Javascript將內容清掉或者使用者清空Cache時才會消失；而sessionStorage則是在Browser/Tab關閉時就會清空，下面先來看一個簡單的範例：
我先在畫面上拉兩個欄位：
當我按下Save時會將TextBox中的文字分別寫到locaoStorage跟sessionStorage中，並寫了一個讀取Storage的function：
1 | function loadStorage() { |
2 | document.getElementById("local").value = window.localStorage["local"]; |
3 | document.getElementById("session").value = window.sessionStorage["session"]; |
4 | } |
5 |
6 | function saveToStorage() { |
7 | window.localStorage["local"] = document.getElementById("local").value; |
8 | window.sessionStorage["session"] = document.getElementById("session").value; |
9 | } |
我們可以發現網頁上的值確實被保存下來了，如果這時候我按下『OpenWin』的按鈕，透過showModalDialog的方式開啟另一個視窗，會發現兩個視窗的值相同，這邊先初步證明了localStorage/sessionStorage的值是被保存下來的：
接著來求證一下sessionStorage的值只會保存在單一Tab中，我們用相同的網址開啟HTML5Storage這個頁面，我們可以發現localStorage的值仍然在，但sessionStorage的值已經消失了，而localStorage則在關閉瀏覽器再開啟時還是可以看的到，透過這樣簡單的範例大致上求證了一下兩者生命週期的差異，我測試過IE9、Chrome11、FF3.6：
適度地透過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 |
07 | if (localStorage.pagecount) |
08 | { |
09 | localStorage.pagecount=Number(localStorage.pagecount) +1; |
10 | } |
11 | else |
12 | { |
13 | localStorage.pagecount=1; |
14 | } |
15 | document.write("Visits: " + localStorage.pagecount + " time(s)."); |
16 |
17 | </script> |
18 |
19 | <p>刷新頁面會看到計數器在增長。</p> |
20 |
21 | <p>請關閉瀏覽器窗口，然後再試一次，計數器會繼續計數。</p> |
22 |
23 | </body> |
24 | </html> |
沒有留言:
張貼留言