1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用

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

时间:2020-04-12 03:46:45

相关推荐

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

下面是个简单易学的HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用教程,小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

使用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

html xmlns=""

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存储的localStorage和sessionStorage方式进行Web页面数据本地存储。

//页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。

function saveSession() {

var t1 = ("");

var t2 = ("");

var mydata = ;

var oStorage = ;

= mydata;

+= "sessionStorage保存mydata:" + mydata + "n";

}

function readSession() {

var t1 = ("");

var oStorage = ;

var mydata = "不存在";

if () {

mydata = ;

}

+= "sessionStorage读取mydata:" + mydata + "n";

}

function cleanSession() {

var t1 = ("");

var oStorage = ;

var mydata = "不存在";

if () {

mydata = ;

}

("");

+= "sessionStorage清除mydata:" + mydata + "n";

}

function saveStorage() {

var t1 = ("");

var t2 = ("");

var mydata = ;

var oStorage = ;

= mydata;

+= "localStorage保存mydata:" + mydata + "n";

}

function readStorage() {

var t1 = ("");

var oStorage = ;

var mydata = "不存在";

if () {

mydata = ;

}

+= "localStorage读取mydata:" + mydata + "n";

}

function cleanStorage() {

var t1 = ("");

var oStorage = ;

var mydata = "不存在";

if () {

mydata = ;

}

("");

+= "localStorage清除mydata:" + mydata + "n";

}

/script

div

textarea/textarea

label需要保存的数据: /label

input type="text" /

input type="button" name="b1" value="session保存" /

input type="button" value="session读取" /

input type="button" value="session清除" /

input type="button" value="local保存" /

input type="button" value="local读取" /

input type="button" value="local清除" /

/div

/body

/html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。