iT邦幫忙

DAY 20
6

上一篇文章:http://ithelp.ithome.com.tw/question/10159772

前三篇文章簡單地分享了HTML5 API

這篇文章要分享的是離線存取(offline access)

HTTP協定(Protocol)是一個「沒有狀態(Stateless)」的協定,
但仍可以透過一些網頁與Web Server的狀態管理來做。

傳統的cookies或是HTML5的Session Storage API、Local Storage API等等都可以做到類似的功能。

==== 使用cookies維持Session的狀態資訊 ====

當我連上一個Web網站並讀取一個網頁(專業術語:Client端對Web Server發出一個要求,Request),
只要Web Server把網頁的HTML內容完全傳遞給我的瀏覽器之後
(專業術語:Web Server給Client端一個回應,Response),Web Server跟我的電腦就斷線了(off-line)。
不信的話,當您的瀏覽器完全取得HTML資料後,您把網路線移除,

檢查一下瀏覽器上的畫面、文字與圖片應該都在,是不是?

Cookies可以暫存在使用者的周邊、瀏覽器上面,給Web Server識別您的身份。
舉例來說,當我連上一個網站之後,隔天再度連上線變不需要輸入帳號與密碼,也可以直接登入。

以IE瀏覽器為例,cookies最多只能存放4KB的資料量(無法存放大量數據),或是4KB以內最多20組的數值。
有些網站在無意間可能”共用”不同網站給予的cookies而造成私密資料的曝光,

現在的瀏覽器都有頁籤(Tab)功能可以在一個瀏覽器內同時開啟多個網頁,也可能造成共用Cookies的情況。

因此Cookies檔案 "可能" 會被濫用、破解而導致私人訊息的外洩。

由於應用程式處理離線行為(例如在電腦上暫時存放資料以便稍後傳回Web Server)的機會越來越多,

因此這類資訊「無意間被洩漏、誤用」的情況就更為普遍。

==== 使用Session Storage(暫時存放區) ====

Session storage是一種(Client端)瀏覽器上面的持久機制
用來存放 “字串”資料,直到時限過期為止。

或是當使用者關閉瀏覽器的時候也會消失。

如果您有其他資料型態,例如:數字、布林(boolean)等等,請先轉換成「字串」才能放到這些儲存區裡面。

if( window.sessionStorage ){
...
}

註解:為了方便使用,Session storage可以直接在程式裡面呼叫,不需要在前面加上window物件,例如:window.sessionStorage。

注意!Session storage是「暫存性的資料」有儲存期限的限制,或是使用者的瀏覽器一關閉就會消失了。
如果您希望這些資料存放更久,後續的Local storage會符合您的需求,但作法都雷同。

[img=415,288]http://ithelp.ithome.com.tw/upload/images/20141015/20141015132624543e05806271d\_resize\_600.jpg[/img]

==== JSON與Session Storage ====

您也可以把Session storage(或Local sotrage)資料轉換成JSON字串,

或是透過JSON.stringify()將這些objects資料序列化(serialize)成JSON字串之後,留待後續使用。

var listDiv = document.getElementById("myList");
// HTML畫面上有一個名為myList的<div>標籤。

for(var i=0; i<sessionStorage.length; i++)
{
listDiv.innerHTML += "<br />" + sessionStorage.key(i);
}

下一篇文章將會介紹 Local Storage

**http://ithelp.ithome.com.tw/question/10160152**

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#19--HTML5 Geolocation API
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#21-- Local Storage(永久存放區)
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言