在传统的HTML时代，浏览器的主要功能只是负责展现HTML页面，即使增加了JS脚本，依然只是动态的修改HTML页面服务。因此，浏览器只是一个页面呈现工具。

如果开发者需要在客户端存储少量数据，早期只能通过Cookie来实现，但Cookie存在如下三点不足：

1. Cookie 大小被限制为4KB

2. Cookie会包含在每个HTTP请求中间向服务器发送，这样势必导致多次发送重复数据

3. Cookie 在网络传输时并未加密（除非整个应用都使用SSL），因此可能存在一些安全隐患。

 

HTML的出现改变了这种情况，H5新增了Web Storage功能。通过Web Storage，可以让应用程序在客户端运行时在客户端保存程序数据，从而把浏览器变成一个真正的“程序运行环境”，而不是简单的“界面呈现工具”。

Web Storage又分为两种：Session Storage 和 Local Storage

Session Storage：基于Session 的Web Storage。Session Storage保存的数据生存期限与用户Session期限相同。用户Session结束时，Session Storage保存的数据也就丢失了。

注：用户Session期限是指用户第一次访问某网站开始，到用户关闭浏览器、离开该网站的这段时间。

Local Storage：保存在用户磁盘的Web Storage，通过Local Storage保存的数据生存期限很长，除非用户或程序显示得清除这些数据，否则这些数据将会一直存在。

window对象提供了sessionStorage、localStorage两个属性，这两个属性分别代表了Session Storage和Local Storage。Session Storage和Local Storage都是Storage接口的实例。因此他们的功能和用户几乎是相同的，只是他们保存数据的生存期限不同。

Session Storage和Local Storage添加key-value和读取value：

//添加key-valuestorage.setItem("myItem","Lujie");

//读取myItem对应的valuevar item = storage.getItem("myItem");

如果要遍历Session Storage和Local Storage所有的key-value值，可以用for循环

for (var i=0;i

 

注：目前Opera，Chrome，Safari都已经同时支持Session Storage和Local Storage，但Firefox目前只支持Local Storage，不支持Session Storage。

下面用一个实例来展示Session Storage和Local Storage的用法。实现在浏览器端提交留言并显示，数据都存储在浏览器端，不提交给服务器。

			
     						
客户端留言板
		
						
     
		
     
			      
       
				        
留言内容
				        
留言时间