如何使用HTML5Web存儲(chǔ)的localStorage和sessionStorage方式進(jìn)行Web頁(yè)面數(shù)據(jù)本地存儲(chǔ)

這篇文章主要介紹了如何使用HTML5 Web存儲(chǔ)的localStorage和sessionStorage方式進(jìn)行Web頁(yè)面數(shù)據(jù)本地存儲(chǔ)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站-成都網(wǎng)站建設(shè)公司，專注網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷推廣，申請(qǐng)域名，虛擬主機(jī)，網(wǎng)站托管維護(hù)有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題，請(qǐng)聯(lián)系創(chuàng)新互聯(lián)建站。

使用HTML5 Web存儲(chǔ)的localStorage和sessionStorage方式進(jìn)行Web頁(yè)面數(shù)據(jù)本地存儲(chǔ)。

頁(yè)面參考如下圖，能將頁(yè)面上的數(shù)據(jù)進(jìn)行本地存儲(chǔ)。并能讀取存儲(chǔ)的數(shù)據(jù)顯示在頁(yè)面上。

localStorage（本地存儲(chǔ)）,可以長(zhǎng)期存儲(chǔ)數(shù)據(jù)，沒有時(shí)間限制，一天，一年，兩年甚至更長(zhǎng)，數(shù)據(jù)都可以使用。

sessionStorage（會(huì)話存儲(chǔ)），只有在瀏覽器被關(guān)閉之前使用，創(chuàng)建另一個(gè)頁(yè)面時(shí)同意可以使用，關(guān)閉瀏覽器之后數(shù)據(jù)就會(huì)消失。

某個(gè)博主的測(cè)試localStorage兼容情況，如下：
Chrome4+ 開始支持localStorage

Firefox3.5+開始支持localStorage
Firefox1.5+支持globalStorage

IE8+支持localStorage
IE7兼容模式支持localStorage
IE5.5+支持userdata

Safari 4+ 支持localStorage
Opera10.5+支持localStorage

如何使用HTML5 Web存儲(chǔ)的localStorage和sessionStorage方式進(jìn)行Web頁(yè)面數(shù)據(jù)本地存儲(chǔ)

代碼如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
textarea {
width: 300px;
height: 300px;
}
.button {
width: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
//使用HTML5 Web存儲(chǔ)的localStorage和sessionStorage方式進(jìn)行Web頁(yè)面數(shù)據(jù)本地存儲(chǔ)。
//頁(yè)面參考如下圖，能將頁(yè)面上的數(shù)據(jù)進(jìn)行本地存儲(chǔ)。并能讀取存儲(chǔ)的數(shù)據(jù)顯示在頁(yè)面上。
function saveSession() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var mydata = t2.value;
var oStorage = window.sessionStorage;
oStorage.mydata = mydata;
t1.value += "sessionStorage保存mydata:" + mydata + "\n";
}
function readSession() {
var t1 = document.getElementById("t1");
var oStorage = window.sessionStorage;
var mydata = "不存在";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
t1.value += "sessionStorage讀取mydata:" + mydata + "\n";
}
function cleanSession() {
var t1 = document.getElementById("t1");
var oStorage = window.sessionStorage;
var mydata = "不存在";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
oStorage.removeItem("mydata");
t1.value += "sessionStorage清除mydata:" + mydata + "\n";
}
function saveStorage() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var mydata = t2.value;
var oStorage = window.localStorage;
oStorage.mydata = mydata;
t1.value += "localStorage保存mydata:" + mydata + "\n";
}
function readStorage() {
var t1 = document.getElementById("t1");
var oStorage = window.localStorage;
var mydata = "不存在";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
t1.value += "localStorage讀取mydata:" + mydata + "\n";
}
function cleanStorage() {
var t1 = document.getElementById("t1");
var oStorage = window.localStorage;
var mydata = "不存在";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
oStorage.removeItem("mydata");
t1.value += "localStorage清除mydata:" + mydata + "\n";
}
</script>
<div>
<textarea id="t1"></textarea>
<label>需要保存的數(shù)據(jù): </label>
<input type="text" id="t2" />
<input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" />
<input type="button" class="button" onclick="readSession()" value="session讀取" />
<input type="button" class="button" onclick="cleanSession()" value="session清除" />
<input type="button" class="button" onclick="saveStorage()" value="local保存" />
<input type="button" class="button" onclick="readStorage()" value="local讀取" />
<input type="button" class="button" onclick="cleanStorage()" value="local清除" />
</div>
</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用HTML5 Web存儲(chǔ)的localStorage和sessionStorage方式進(jìn)行Web頁(yè)面數(shù)據(jù)本地存儲(chǔ)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章題目：如何使用HTML5Web存儲(chǔ)的localStorage和sessionStorage方式進(jìn)行Web頁(yè)面數(shù)據(jù)本地存儲(chǔ)
轉(zhuǎn)載源于：http://jinyejixie.com/article16/iicigg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、App設(shè)計(jì)、軟件開發(fā)、Google、動(dòng)態(tài)網(wǎng)站、網(wǎng)站營(yíng)銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何使用HTML5Web存儲(chǔ)的localStorage和sessionStorage方式進(jìn)行Web頁(yè)面數(shù)據(jù)本地存儲(chǔ)