HTML5 本地存储

HTML5的本地化存储标准主要有以下3类：

(1) Web Storage 

(2) Web SQL Database  

(3) IndexedDB

本文地址: http://blog.csdn.net/chen_zw/article/details/23362511

一、Web Storage 

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中存储值后需要进行类型转换。

eg:

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();

eg：

<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也是不可以共享的。

参考文章：HTML5 本地存储

HTML5 本地存储,古老的榕树,5-wow.com