HTML5 使用 sessionStorage 進(jìn)行頁面?zhèn)髦档姆椒?/h1>

  發(fā)布時間：2018-07-02 15:37:22   作者：前端dog   我要評論

這篇文章主要介紹了HTML5 使用 sessionStorage 進(jìn)行頁面?zhèn)髦档姆椒ǖ南嚓P(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

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

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

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

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


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

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

然后在頁面 b 就可以通過以下語句獲?。?/p>

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

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

var newData = {unitGroup: unit_group};

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

• Tag：頁面?zhèn)髦?/a>   sessionStorage   HTML5  

相關(guān)文章

• 在html頁面中取得session中的值的方法

  這篇文章主要介紹了在html頁面中取得session中的值的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

  2020-08-11

最新評論