HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用

作者：Eve Cole 更新時間：2025-04-17 11:00:04

點評：localStorage（本地存儲）,可以長期存儲數據，沒有時間限制，一天，一年，兩年甚至更長，數據都可以使用,sessionStorage（會話存儲），只有在瀏覽器被關閉之前使用，創建另一個頁面時同意可以使用，關閉瀏覽器之後數據就會消失

使用HTML5Web存儲的localStorage和sessionStorage方式進行Web頁面數據本地存儲。

頁面參考如下圖，能將頁面上的數據進行本地存儲。並能讀取存儲的數據顯示在頁面上。

localStorage（本地存儲）,可以長期存儲數據，沒有時間限制，一天，一年，兩年甚至更長，數據都可以使用。

sessionStorage（會話存儲），只有在瀏覽器被關閉之前使用，創建另一個頁面時同意可以使用，關閉瀏覽器之後數據就會消失。

某個博主的測試localStorage兼容情況，如下：

Chrome4+ 開始支持localStorage

Firefox3.5+開始支持localStorage

Firefox1.5+支持globalStorage

IE8+支持localStorage

IE7兼容模式支持localStorage

IE5.5+支持userdata

Safari 4+ 支持localStorage

Opera10.5+支持localStorage

<!DOCTYPE html>

<head>

textarea {

width: 300px;

height: 300px;

}

.button {

width: 100px;

}

</style>

</head>

<body>

//使用HTML5 Web存儲的localStorage和sessionStorage方式進行Web頁面數據本地存儲。

//頁面參考如下圖，能將頁面上的數據進行本地存儲。並能讀取存儲的數據顯示在頁面上。

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>

<label>需要保存的數據: </label>

</div>

</body>

</html>