HTML5的WEB存储 loacalStorage和sessionStorage，一个比cookie更好的存储方式

sessionStorage、localStorage和cookie之间的区别？
共同点：用于浏览器端存储的缓存数据
不同点：(1)、存储内容是否发送到服务器端。当设置了cookie后，数据会发送到服务器端，造成一定的宽带浪费；web storage会将数据保存到本地，不会造成资源浪费
(2)、数据存储大小不同。cookie数据不能超过4k；web storage数据存储可以达到5M；
(3)、存储周期不同；cookie只在设置了cookie过期时间之前有效，即使关闭浏览器和窗口；localstorage数据存储永久有效；sessionstorage仅在浏览器关闭之前有效；
(4)、作用域不同：cookie和localstorage在同源同窗口中都是共享的
3、webstorage相比cookie的优势
(1)、存储空间更大
(2)、存储内容不会发送到服务器，减少宽带资源的浪费
(3)、更多丰富易用的接口

(4)、独立的存储空间

localStorage实例

 

	
		
		
		
	
	
		

		点我
		
点击按钮查看计数器的增加
		
关闭浏览器，重新打开该页面，计数器将继续计数（不是重置）
	

sessionStorage实例

	
		
		
		
	
	
		

		点我
		
浏览器关闭次数重置
	

到这里你会发现localStorage和sessionStorage用法完全一样，接口一样，区别也就是存储的周期不同。

localStorage.setItem(key,value);保存数据

localSorage.getItem(key);读取数据

localStorage.removeItem(key)删除单个数据

localSorage.clear();删除所有数据

localSorage.key(index);得到某个索引的key

上面的例子太过简单，看下面复杂点的，这里用localStorage做例子

	
		
		
		
		
		
	
	
		

			

				
key
				
url
			
		
		

			

				网站名key:
				

				网址:
				

				保存信息
			
			

				网站名key
				

				查找