網頁經常需要儲存各種片段的少量暫存性資料,例如網路購物車之類的程式,往往會將使用者的身份辨識資訊儲存在使用者的電腦上,以利程式辨識,另外,某些特定的應用程式,例如記錄簡要暫存資訊的筆記本程式,也可以透過相關的機制儲存網頁上的資料,有兩種方式支援暫存性網頁資料的儲存,分別是 Cookies 與 Web Storage ,這一篇先來看前者-Cookies 。
在HTML5 之前,Cookies 是網頁暫存資料的主要機制,目前所有的瀏覽器均支援 cookies ,因此 cookies 的通用性相當高,你可以隨意使用 cookies 而不用考慮瀏覽器的支援問題。一個 cookie 是一組資料,通常為了辨識會以「名稱/值」的格式組合建立如下:
name 表示這個 cookie 的名稱, value 則是 cookie 值,假設要建立一個 cookie 來儲存書的資料,我們需要的程式碼如下:
在HTML5 之前,Cookies 是網頁暫存資料的主要機制,目前所有的瀏覽器均支援 cookies ,因此 cookies 的通用性相當高,你可以隨意使用 cookies 而不用考慮瀏覽器的支援問題。一個 cookie 是一組資料,通常為了辨識會以「名稱/值」的格式組合建立如下:
Name=value
name 表示這個 cookie 的名稱, value 則是 cookie 值,假設要建立一個 cookie 來儲存書的資料,我們需要的程式碼如下:
var c = 'title=HTML5從零開始' ;
接下來將其設定給網頁專屬的 cookie 進行儲存即可,如下式:
而如果要將其取出,只要引用 document 的cookie 即可,但是 cookie 可以儲存一組以上的資料,因此回傳的內容包含了所有 cookie 資料。而當資料儲存至 cookie ,每一組資料之間,以分號 ( ;) 加上空白作為分隔符號,因此調用 split() 方法將其分隔成陣列,再透過迴圈逐一存取。
將三組與書籍資訊有關的資料儲存至 cookie ,然後再逐一將其取出,得到以下的結果:
其中列舉三筆存入 cookie 的資料。以下是程式碼:
首先將三組資料儲存至 cookie ,然後再將其取出,要注意的是,取得的資料調用 split() 方法,取得其回傳的陣列。
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() 方法,取得其回傳的陣列。
沒有留言:
張貼留言