網頁資料儲存－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() 方法，取得其回傳的陣列。

繼續閱讀…