怎么在HTML5中利用sessionStorage實現(xiàn)頁面?zhèn)髦?/h1>

發(fā)布時間：2021-03-26 17:20:59 來源：億速云 閱讀：174 作者：Leah 欄目：web開發(fā)

怎么在HTML5中利用sessionStorage實現(xiàn)頁面?zhèn)髦?？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

在客戶端存儲的方法有兩種： 

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..
}

之所以會使用到這個功能，是因為我目前在做的一個數(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)容，你們掌握怎么在HTML5中利用sessionStorage實現(xiàn)頁面?zhèn)髦档姆椒藛?？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！