HTML5 提供的本機儲存功能,使得web應用程式可以將資料儲存在使用者的本機瀏覽器中。在HTML5 中,資料不是由每個伺服器請求傳遞的,而是只有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能。
在客戶端儲存的方法有兩種:
1. localStorage: 沒有時間限制的存儲,而且容量大,至少5M大小;所有相同域名的頁面都可以存儲和獲取相同的數據。
2. sessionStorage: 針對一個session的資料存儲,該tab關掉就會消失。
目前大部分瀏覽器都已經很好地支援了HTML5 ,但了為安全,使用前還是應該做客戶端偵測:
if (typeof(Storage) !== undefined) { // Code for localStorage/sessionStorage.} else { // Sorry! No Web Storage support..}
之所以會使用到這個功能,是因為我目前正在做的資料型網站,要透過API介面查詢參數傳給後台,並取得資料庫中傳回的資料。而這裡有一個問題,我要在頁面a 跳到頁面b,然後在頁面b 呼叫API 介面將參數數據傳給後台並獲取數據,而該參數數據是在頁面a 獲得的,那麼如何將頁面a產生的值傳遞給頁面b 呢?
假設我們要傳給後台的值和資料格式是: {unitGroup:[一年级,二年级,三年级];
那麼在頁面a 產生了我們所需要的資料unitGroup 後,則使用sessionStorage:
if (typeof(Storage) !== undefined) { sessionStorage[unitGroup] = data.unit.value;} else { sessionStorage[unitGroup] = '';}
然後在頁面b 就可以透過以下語句取得:
var unit_group = '';if (typeof(Storage) !== undefined) { var myunits = sessionStorage[unitGroup]; unit_group = myunits.split(,);}
然後即可呼叫ajax 將資料傳給後台:
var newData = {unitGroup: unit_group};
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。