早期的web中使用cookies在客户端保存诸如用户名等简单的信息，但是，在使用cookies存储永久数据存在以下问题。
1.cookies的大小限制在4kB，不适合大量的数据存储。
2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。
3 cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。
HTML5很好的提供了本地存储的功能，以键值对存储的解决方案，支持容量至少为4M，HTML5的web提供了两种客户端存储方式。
1.localStorage：是一种没有时间限制的数据存储方式，可以将数据永久保存在客户端。
sessionStorage：指的是针对一个session的数据存储，即将数据保存在session对象中，当关闭浏览器后，这些数据就被删除。
在使用web存储之前，应该先检查一下浏览器是否支持localStorage和sessionStorage(I7以下不支持)
判断方法
if(typeof(localStorage !==‘undefined‘){
};
或者if(window.localStorage){
}
web Storage支持的属性与方法
getItem(key):获取指定key所存储的value值
key(index)方法：返回列表中对应索引的key值
length属性：返回key/value队列的长度
removeItem(key)方法：从Storage中删除一个对应的键值对。
setItem(key,value)方法：将value存储到key指定的字段。
clear()方法：移除所有的内容
注意:设置，获取key/value的方法除了使用setItem()和getItem()方法以外，还分别提供了一个简单的方法：设置方法：sessionStorage.someKey = ‘someValue‘
获取方法：alert(sessionStorage.someKey);
下面一个例子来说明一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="localstorage.css" type="text/css" rel="stylesheet"/>
<script src="Storage.js" type="text/javascript"></script>
</head>
<body>
<input id="t1" type="text" />
<button id ="add" >添加</button>
<button id =‘remove‘>删除</button><br/>
<textarea id="t2" readonly="readonly"></textarea>
</body>
</html>
css
#t2{
width:500px;
height:400px;
margin-top:10px;
}
js
window.onload = function(){
var content = document.getElementById(‘t1‘);
var btn1 = document.getElementById(‘add‘);
var btn2 =document.getElementById(‘remove‘);
btn1.addEventListener(‘click‘,SaveInfo);
btn2.addEventListener(‘click‘,clearInfo);
function SaveInfo(){
if(typeof localStorage !==‘undefined‘){
if(localStorage.storage){
localStorage.storage += content.value + ‘\n发表时间：‘+(new Date()).toDateString() +‘\n‘;
}else{
localStorage.storage = content.value + ‘\n发表时间：‘+(new Date()).toDateString() +‘\n‘;
}
ShowInfo()
}else {
alert(‘无法存储!‘)
}
}
function clearInfo(){
localStorage.removeItem(‘storage‘);
ShowInfo()
}
function ShowInfo(){
var txt = document.getElementById(‘t2‘);
if(localStorage.storage){
txt.value =localStorage.getItem(‘storage‘);
}else{
txt.value =‘没有内容！‘
}
}
}