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};
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。