HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

来源：阅读：1682 次日期：2016-08-01 16:19:24

温馨提示：小编为您整理了“HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用”,方便广大网友查阅！

使用HTML5 Web存储的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>

上一篇：HTML5 新旧语法标记对我们有什么好处

下一篇：网页制作实例:CSS3+jQuery制作搜索条

手机网站地址：HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！