網頁資料儲存-Cookies

網頁經常需要儲存各種片段的少量暫存性資料,例如網路購物車之類的程式,往往會將使用者的身份辨識資訊儲存在使用者的電腦上,以利程式辨識,另外,某些特定的應用程式,例如記錄簡要暫存資訊的筆記本程式,也可以透過相關的機制儲存網頁上的資料,有兩種方式支援暫存性網頁資料的儲存,分別是 Cookies 與 Web Storage ,這一篇先來看前者-Cookies 。

在HTML5 之前,Cookies 是網頁暫存資料的主要機制,目前所有的瀏覽器均支援 cookies ,因此 cookies 的通用性相當高,你可以隨意使用 cookies 而不用考慮瀏覽器的支援問題。一個 cookie 是一組資料,通常為了辨識會以「名稱/值」的格式組合建立如下:

Name=value 

name 表示這個 cookie 的名稱, value 則是 cookie 值,假設要建立一個 cookie 來儲存書的資料,我們需要的程式碼如下:

var c = 'title=HTML5從零開始' ;  

接下來將其設定給網頁專屬的 cookie 進行儲存即可,如下式:

document.cookie = c;

而如果要將其取出,只要引用 document 的cookie 即可,但是 cookie 可以儲存一組以上的資料,因此回傳的內容包含了所有 cookie 資料。而當資料儲存至 cookie ,每一組資料之間,以分號 ( ;) 加上空白作為分隔符號,因此調用 split() 方法將其分隔成陣列,再透過迴圈逐一存取。

將三組與書籍資訊有關的資料儲存至 cookie ,然後再逐一將其取出,得到以下的結果:

title=HTML5從零開始
price=650
author=呂高旭

其中列舉三筆存入 cookie 的資料。以下是程式碼:

<script>
    // 將資料存入 cookie
    var c = 'title=HTML5從零開始' ;
    document.cookie = c;
    c = 'price=650';
    document.cookie = c;
    c = 'author=呂高旭';
    document.cookie = c;
    // 取出 cookie 資料
    var cookies = document.cookie;   
    cookies=cookies.split('; ');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        console.log(cookie);
    }      
</script>

首先將三組資料儲存至 cookie ,然後再將其取出,要注意的是,取得的資料調用 split() 方法,取得其回傳的陣列。


沒有留言: