html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
1.客户端存储：window.sessionStorage
用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
2.硬盘存储：window.localStorage
数据存在本地，没有时间限制的持久的存储，只要不主动删除可以一直存储。
sessionStorage和localStorage有一些相同的方法，用法相同，以sessionStorage为例说明。
window.sessionStorage.setItem(); //用来存储的方法,setItem( key, value)
window.sessionStorage.getItem() //获取存储的值 ,.getItem(key),
window.sessionStorage.removeItem() //删除指定key存储的值,removeItem(key)
window.sessionStorage.clear(); //清除所有的key/value,.clear()
案例：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.t1{
width: 500px;
height: 300px;
border: 1px solid silver;
}
.t2{
width: 500px;
height: 300px;
border: 1px solid silver;
}
#title{
width: 400px;
outline: none;
}
#content{
width: 400px;
height: 150px;
outline: none;
resize: none;
}
</style>
</head>
<body>
<div class="t1">
<ul>
<li>标题：<br><input id="title" type="text"></li>
<li>内容：<br><textarea id="content"></textarea></li>
<li>
<button id="btnsend">发表</button>
<button id="clear">清除</button>
</li>
</ul>
</div>
<div class="t2"></div>
<script>
var msg={
title:document.getElementById("title"),
content:document.getElementById("content"),
btn:document.getElementById("btnsend"),
clearbtn:document.getElementById("clear"),
contentData: document.getElementsByClassName("t2")[0],
sendmsg:function(t,c){
var time=new Date();
var usertime=time.toLocaleString();
var times=time.getTime();
var data = {
username: "花花",
title: t,
content: c,
time: usertime
};
window.sessionStorage.setItem(times,JSON.stringify(data));
msg.selectinfo();
},
selectinfo:function(){
msg.contentData.innerHTML = "";
for(var i=0;i<window.sessionStorage.length;i++){
console.log(window.sessionStorage.length);
var key=window.sessionStorage.key(i);
var data = JSON.parse(window.sessionStorage.getItem(key));
msg.createElements(data);
}
},
createElements:function(Data){
var ul=document.createElement("ul");
var li=document.createElement("li");
li.innerHTML = "昵称：" + Data['username'] + ",标题：" + Data['title'] + ",内容：" + Data['content'] + ",时间：" + Data['time'];
ul.appendChild(li);
msg.contentData.appendChild(ul);
}
};
msg.btn.addEventListener("click",function(){
var title=msg.title.value;
var content=msg.content.value;
msg.sendmsg(title,content)
});
msg.clearbtn.addEventListener("click",function(){
window.sessionStorage.clear();
msg.selectinfo();
});
window.onload = msg.selectinfo();
</script>
</body>
</html>运行示例：
