HTML5 localStorage and sessionStorage--总结的不错，值得阅读 -null-ICode联盟

HTML5 提供两种web存储方法，localStorage 与 sessionStorage

localStorage 与 sessionStorage 区别

localStorage没有过期时间，只要不clear或remove，数据会一直保存。

sessionStorage 针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后，数据将被删除。

特点：

1.localStorage 默认支持的容量为一个站5M，当调用setItem超过上限时，会触发QuotaExceededError异常。当然有些浏览器支持修改容量上限，但为了兼容其他浏览器，最好按5M的容量来使用。

2.localStorage 是以key-value形式保存数据的，key和value只能是字符串格式。因此数字1保存后，会转换成字符串1。

3.localStorage 的写入与读取写法有以下几种：

localStorage.name = \'fdipzone\';  
name = localStorage.name;  
  
localStorage[\'name\'] = \'fdipzone\';  
name = localStorage[\'name\'];  
  
localStorage.setItem(\'name\', \'fdipzone\');  
name = localStorage.getItem(\'name\');

localStorage[key] = value写法主流浏览器都支持，官方并没有说明那一种写法是标准。但如果执行以下的代码就使localStorage失效。

localStorage.setItem = null;  
localStorage.getItem = null;  
localStorage.removeItem = null;  
localStorage.clear = null;

因此，建议使用setItem(), getItem(), removeItem(), clear()来实现写入，读取，删除，清空。

4.如果要保存非字符串的内容，建议使用JSON来处理。写入数据时用JSON.stringify转成字符串，读取数据时用JSON.parse把字符串转为之前的格式。

例子1：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> Local Storage and Session Storage </title>
 </head>

 <body>
  <p>姓名:<input type="text" name="name" id="name"></p>
  <p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
  <p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="removeBtn" value="remove name"> <input type="button" id="clearBtn" value="clear"> </p>

  <script type="text/javascript">
	var oStorage = window.localStorage;

	function $(id){
		return document.getElementById(id);
	}

	// 保存数据
	$(\'saveBtn\').onclick = function(){
		oStorage.setItem(\'name\', $(\'name\').value);

		if($(\'gender1\').checked==true){
			oStorage.setItem(\'gender\', 1);
		}else if($(\'gender2\').checked==true){
			oStorage.setItem(\'gender\', 2);
		}
	}

	// 获取数据
	$(\'getBtn\').onclick = function(){
		$(\'name\').value = oStorage.getItem(\'name\');
		if(oStorage.getItem(\'gender\')==1){
			$(\'gender1\').checked = true;
		}else if(oStorage.getItem(\'gender\')==2){
			$(\'gender2\').checked = true;
		}
	}

	// 删除数据name
	$(\'removeBtn\').onclick = function(){
		oStorage.removeItem(\'name\');
	}

	// 清空数据
	$(\'clearBtn\').onclick = function(){
		oStorage.clear();
	}

  </script>

 </body>
</html>

例子2：使用 JSON.stringify 和 JSON.parse 封装数据

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> Local Storage and Session Storage </title>
 </head>

 <body>
  <p>姓名:<input type="text" name="name" id="name"></p>
  <p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
  <p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="clearBtn" value="clear"> </p>

  <script type="text/javascript">
	var oStorage = window.localStorage;

	function $(id){
		return document.getElementById(id);
	}

	// 保存数据
	$(\'saveBtn\').onclick = function(){
		var name = $(\'name\').value;
		var gender;
		if($(\'gender1\').checked==true){
			gender = 1;
		}else if($(\'gender2\').checked==true){
			gender = 2;
		}

		var data = {};
		data[\'name\'] = name;
		data[\'gender\'] = gender;

		oStorage.setItem(\'data\', JSON.stringify(data));
	}

	// 获取数据
	$(\'getBtn\').onclick = function(){
		var data = JSON.parse(oStorage.getItem(\'data\'));

		if(data){
			var name = data[\'name\'];
			var gender = data[\'gender\'];

			$(\'name\').value = name;

			if(gender==1){
				$(\'gender1\').checked = true;
			}else if(gender==2){
				$(\'gender2\').checked = true;
			}
		}
	}

	// 清空数据
	$(\'clearBtn\').onclick = function(){
		oStorage.clear();
	}

  </script>

 </body>
</html>

监听localStorage的值，当发生变化时同步页面数据

当调用setItem(), removeItem(), clear() 时，可以监听这些事件，方便不同的页面之间更新数据。

// 监听数据变化,当数据发生变化时,同步数据显示  
window.onstorage = function(event){  
    var status = {}  
    status.key = event.key;  
    status.oldValue = event.oldValue;  
    status.newValue = event.newValue;  
    status.url = event.url;  
    status.storage = event.storageArea;  
  
    // 执行同步数据处理...  
}