关于HTML5localStorageandsessionStorage之间的区别-

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 = &＃39;fdipzone&＃39;;
name = localStorage.name;
localStorage[&＃39;name&＃39;] = &＃39;fdipzone&＃39;;
name = localStorage[&＃39;name&＃39;];
localStorage.setItem(&＃39;name&＃39;, &＃39;fdipzone&＃39;);
name = localStorage.getItem(&＃39;name&＃39;);

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：

 
  
  
 
 
  
姓名:
  
性别: 男  女
  
    
  
 

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

 
  
  
 
 
  
姓名:
  
性别: 男  女
  
   
  
 

监听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;
	// 执行同步数据处理...
}

本篇文章讲解了关于HTML5 localStorage and sessionStorage 之间的区别，更多相关内容请关注 第一PHP社区 。