长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

达内长沙web培训详解Web Storage

  • 时间:2016-11-25 17:53
  • 发布:长沙web培训
  • 来源:csdn

Web Storage是目前得到支持最广泛的HTML5本地存储规范,IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+,以及iPhone 2+和Android 2+都已经支持Web Storage,Web Storage类似于HTML4的cookie,但cookie最大只支持4k,而且每次发起一个新的请求,会自动把该域下的所有cookie都发送到服务端。

1. Web Storage的主要有以下特点:

(1)提供了更大的存储空间。cookie的存储限制在了4k之内,而Web Storage官方建议为每个网站5MB。

(2) cookie有一个机制,就是在每次客户端请求服务器的时候都会将cookie发送给服务器,这无疑会做很多不必要的操作,因为并不是每次请求服务器都需要cookie的所有信息,而web storage很好的解决了这个问题,它不是采取自动发送的方式,这样就减少了不必要的工作。

(3) Web Storage赋值存储的都是字符串类型的,也就是说如果你要保存数字的话,那么获取到Storage中存储值后需要进行类型转换。

例如:

window.localStorage.setItem('count', 8);  //数值赋值  

console.log(window.localStorage.count + 8);  //结果并非16,而是88  

console.log(parseInt(window.localStorage.count) + 8);  //须先转换成整数型,再进行相加,结果为16  

2. Web Storage包括以下2个存储对象:

2.1  localStorage

localStorage用于持久化的本地存储,它没有时间限制,除非主动删除数据,否则数据是永远不会过期的。

可以使用以下语句判断浏览器是否支持localStorage:

if (!window.localStorage == false) {

alert("浏览器支持localStorage");

} else {

alert("浏览器不支持localStorage,请升级浏览器版本!");

}

localStorage的操作非常简单,常用的方法如下:

(1) window.localStorage.key = value;

(2) window.localStorage.setItem(key, value);

(3) window.localStorage.getItem(key);

(4) window.localStorage.removeItem(key);

(5) window.localStorage.clear();

例如:

<script type="text/javascript">

/*****赋值示例****/

window.localStorage.uin = 'yunlives'; //赋值  

window.localStorage.nick = '夜之子';

//等同于  

window.localStorage.setItem('uin', 'yunlives'); //赋值  

window.localStorage.setItem('nick', '夜之子');

/*****取值示例*****/

console.log(window.localStorage.uin);

console.log(window.localStorage.nick);

//等同于  

console.log(window.localStorage.getItem('uin'));

console.log(window.localStorage.getItem('nick'));

//结合JSON.stringify使用更强大  

var userObj = {

'uin': 'yunlives',

'nick': '夜之子'

};

window.localStorage.setItem('user', JSON.stringify(userObj));

JSON.parse(window.localStorage.getItem('user')).nick; //结果显示'夜之子'  

/******移除项******/

window.localStorage.removeItem('uin');

/*****清空****/

window.localStorage.clear();

</script>

NOTE:(1)对于某一个域下来说,local storage是共享的(多个窗口共享)

2.2 SessionStorage

SessionStorage针对一个session进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

可以使用以下语句判断浏览器是否支持localStorage:

if (!window.sessionStorage == false) {

alert("浏览器支持sessionStorage");

} else {

alert("浏览器不支持sessionStorage,请升级浏览器版本!");

}

sessionStorage的使用方法同localStorage,这里省略....

NOTE:(1)sessionStorage所存储数据的生命周期,和Session类似,关闭浏览器(或标签页)后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。

(2)session storage每个窗口的值都是独立的(每个窗口都有自己的数据),它的数据会随着窗口的关闭而消失,窗口间的sessionStorage也是不可以共享的。

上一篇:达内长沙web培训详解JS表单校验
下一篇:关于html居中的一些问题

马上预约三天免费体验课

姓名:

电话:

如何将url中的参数传递给iframe中的报表?

你需要这些能提高效率的CSS实用工具

关于html居中的一些问题

达内长沙web培训详解Web Storage

选择城市和中心
贵州省

广西省

海南省