在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能，之前可以使用Cookies在客户端保存诸如用户名等简单用户信息，但通过长期使用，人们发现用Cookies储存永久数据存在几个问题：
1、大小：Cookies的大小被限制在4kb
2、带宽：Cookies是随HTTP事务被一起发送的，因此会浪费一部分发送Cookies时使用的带宽。
3、复杂性：要正确操作Cookies是很困难的
针对以上问题HTML5重新提供了一个在客户端本地保存数据的功能，他就是Web Storage功能。顾名思义，Web Storage功能就是在web上储存数据的功能，这里的储存是针对客户端本地而言的。具体分两种：
1、sessionStorage：将数据保存在session对象中。session是指用户在某个浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
2、localStorage：将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时仍然可以继续。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浏览器存储</title> </head> <body> <script> function saveStorage(id){ var target=document.getElementById(id); var str=target.value; sessionStorage.setItem("message",str); } function loadStorage(id) { var target=document.getElementById(id); var msg=sessionStorage.getItem("message"); target.innerHTML=msg; } function saveStorage2(id) { var target=document.getElementById(id); var str=target.value; localStorage.setItem("message",str); } function loadStorage2(id) { var target=document.getElementById(id); var msg=sessionStorage.getItem("message"); target.innerHTML=msg; } </script> <p id="msg"></p> <input type="text" id="input"> <button onclick="saveStorage('input')">保存数据</button> <button onclick="loadStorage('msg')">读取数据</button> <br/><br/> <input type="text" id="input2"> <button onclick="saveStorage('input2')">本地保存数据</button> <button onclick="loadStorage('msg2')">读取数据</button> <p id="msg2"></p> <br/><br/> <script> function saveStorage3(id) { var data=document.getElementById(id).value; var time=new Date().getTime(); localStorage.setItem(time,data); alert("数据已经储存！"); loadStorage3('msg3'); } function loadStorage3(id) { var result="<table border='1'>"; for(var i=0;i<localStorage.length;i++) { var key=localStorage.key(i); var value=localStorage.getItem(key); var date=new Date(); date.setTime(key); result+="<tr><td>"+value+"</td><td>"+date+"</td></tr>"; } result+="</table>"; var target=document.getElementById(id); target.innerHTML=result; } function clearStorage() { localStorage.clear(); alert("数据已经删除"); loadStorage('msg3'); } </script> <p id="msg3"></p> <textarea id="memo" cols="60" rows="10"></textarea> <br/> <button onclick="saveStorage3('memo')">追加数据</button> <button onclick="clearStorage()">删除数据</button> </body> </html>
