HTML5 提供的本地存儲(chǔ)功能，使得web應(yīng)用可以將數(shù)據(jù)存儲(chǔ)在用戶(hù)的本地瀏覽器。在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。

在客戶(hù)端存儲(chǔ)的方法有兩種：
1. localStorage: 沒(méi)有時(shí)間限制的存儲(chǔ)，而且容量大，至少5M大??；所有相同域名的頁(yè)面都可以存儲(chǔ)和獲取相同的數(shù)據(jù)。
2. sessionStorage: 針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)，該tab關(guān)掉就會(huì)消失。

目前大部分瀏覽器都已經(jīng)很好地支持了 HTML5 ，但了為安全，使用前還是應(yīng)該做客戶(hù)端檢測(cè)：

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

之所以會(huì)使用到這個(gè)功能，是因?yàn)槲夷壳霸谧龅囊粋€(gè)數(shù)據(jù)型網(wǎng)站，要通過(guò)API接口查詢(xún)參數(shù)傳給后臺(tái)，并獲取數(shù)據(jù)庫(kù)中返回的數(shù)據(jù)。而這里有一個(gè)問(wèn)題，我要在頁(yè)面 a 跳轉(zhuǎn)到頁(yè)面 b，然后在頁(yè)面 b 調(diào)用API 接口將參數(shù)數(shù)據(jù)傳給后臺(tái)并獲取數(shù)據(jù)，而該參數(shù)數(shù)據(jù)是在頁(yè)面 a 獲得的，那么如何將頁(yè)面 a 產(chǎn)生的值傳遞給頁(yè)面 b 呢？

假設(shè)我們要傳給后臺(tái)的值和數(shù)據(jù)格式是： {unitGroup:["一年級(jí)","二年級(jí)","三年級(jí)"];


那么在頁(yè)面 a 生成了我們所需要的數(shù)據(jù) unitGroup 后，則使用 sessionStorage:

if (typeof(Storage) !== "undefined") {
    sessionStorage["unitGroup"] = data.unit.value;
} else {
    sessionStorage["unitGroup"] = '';
}

然后在頁(yè)面 b 就可以通過(guò)以下語(yǔ)句獲取：

var unit_group = '';
if (typeof(Storage) !== "undefined") {
    var myunits = sessionStorage["unitGroup"];
    unit_group = myunits.split(",");
}

然后即可調(diào)用 ajax 將數(shù)據(jù)傳給后臺(tái)：

var newData = {unitGroup: unit_group};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。