本地存储
Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。 最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，cookie的缺陷比较明显：
1、大小：cookies大小被限制在4KB；
2、带宽：cookies是随事物一起发送的，会浪费一部分带宽，例如拿信物宝来说，发送的cookies并没有在意，存在很多不必要的信息；
3、复杂性：cookies操作起来比较麻烦；所有的信息要被拼到一个长字符串里面；
4、对cookies来说，在相同的站点与多事务处理保持联系不是很容易；
所以HTML5工作组给出了更加理想的解决方案：
Web SQL Database以及Web Storage,需要说明的是，这一块并不是HTML5标准的一部分， 因为当时HTML5工作组觉得HTML5标准过于庞大，于是把这一块单独分出来，有点一块蛋糕吃不完，分成2块吃的意思。
Web Storage
W3C Web Storage规范定义了一种在客户端存储数据的更好的方式，它包含两种不同的存储类型：Session Storage和Local Storage。 不管是Session Storage还是Local Storage，它们都能支持在同域下存储5MB数据，这相比cookies有着明显的优势
web storage对应的方法 | Session Storage | Local Storage |
| sessionStorage.setItem(key,value) | localStorage.setItem(key,value) |
| sessionStorage.getItem(key,value) | localStorage.getItem(key,value) |
setItem()和getItem()方法分别对应的是保存数据和读取数据，唯一不同的是sessionStorage的数据只存在于一个session会话里，当你关掉窗口或者标签时立刻丢掉这些数据 而localStorage对应的数据则可以长久的保存，直到被认为的修改或者删除为止。
Web SQL Database
Web SQL Database采用的是“SQLLite”的文件型数据库，初步应用的话，基本的SQL语句就可以搞定
大体上，要使用本地数据库，有两个必要的步骤：
1、创建访问数据库的对象
2、使用事务处理
一个示例：
var db = openDatabase('myData','1.0','test database',1024*1024); openDatabase()方法含有四个参数，第一个参数为数据库名，第二个参数为版本号，第三个参数为数据库的描述，第四个参数为数据库的大小（1024*1024表示1M大小）
db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]);}) transaction()方法使用了一个回调函数作为参数，以处理这次事务。
既然是SQL Database，当然少不了SQL语句，执行SQL的主要方法是executeSql()。
executeSql()的完整定义如下：
transaction.executeSql(SQLquery,[],dataHandler,errorHandler);
第一个参数是要执行的SQL语句，如如果其中含有未知的参数，用？代替；第二个参数是SQL语句需要用到的参数，即取代第一个参数中的？；第三个参数是查询结果的 处理函数；第四个是错误处理函数；
数据库查询结果的数据集对象有一个rows属性，其中保存了查询到的每条记录，可以用for循环来一次取出里面的数据：
for(var i = 0; i < rows.length; i++){ var temp = rows.item(i); } 说明：opera还支持var temp = rows[i]的写法，不过chrome不支持；
下面是一个利用web storage用作计数器的示例和用web SQL database实现的留言板功能,关闭浏览器再打开之后留言依旧还在（由于实现此标准的厂商不多，web SQL database只支持chrome和opera）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>本地数据库</title> <style type="text/css" media="screen"> *{ margin: 0; padding: 0;} body{ font-size: 14px;} ul,li{ list-style: none; list-style-position: outside;} body{ width: 740px; margin: 0 auto;} .form_item{ min-height: 30px; margin-top: 5px;text-indent:0;} .form_item label{ display: block; line-height: 24px;} .form_item input[type="text"]{ width: 180px; height:24px; line-height: 24px;} .form_item textarea{ vertical-align: top;} .form_item input[type="submit"],input[type="button"]{ width: 80px; height:24px; line-height: 24px; border:1px solid #ff6600; border-radius:4px; background:#ff6600; outline:none; color:#fff; cursor: pointer;} .form_item input[type="submit"]{ margin-right: 50px;} .form_item input[type="submit"]:hover{ position: relative; top:1px;} .datalist{ min-height:300px; border-top: 1px solid #e4e4e4;} .datalist dt{ height: 30px; line-height: 30px; background:#e8e8e8;} .datalist dd{ min-height:30px;line-height: 24px; text-indent:2em;} .datalist time{ float: right; } p{ line-height: 24px; text-indent:2em;} table { width:100%; border:1px solid #e4e4e4; } table td{ border:1px solid #e4e4e4;} .msg{ height:24px; line-height: 24px;} .count_wrap{ border:1px solid #e4e4e4; text-indent: 0;} .count_wrap .count{ margin-right: 50px;} .count{ color: red; font-size: 18px;} </style> </head> <body> <p class="msg" id="msg_1"> </p> <p class="form_item"><label for="">要保存的数据：</label><input type="text" name="text-1" value="" id="text-1"/></p> <p class="form_item"> <input type="button" name="btn-1" value="session保存" id="btn-1"/> <input type="button" name="btn-2" value="session读取" id="btn-2"/> </p> <p class="form_item"> <input type="button" name="btn-3" value="local保存" id="btn-3"/> <input type="button" name="btn-4" value="local读取" id="btn-4"/> </p> <p class="count_wrap">session计数：<span class="count" id='session_count'></span>local计数：<span class="count" id='local_count'></span></p> <script> function getE(ele){ return document.getElementById(ele); } var text_1 = getE('text-1'), mag = getE('msg_1'), btn_1 = getE('btn-1'), btn_2 = getE('btn-2'), btn_3 = getE('btn-3'), btn_4 = getE('btn-4'); btn_1.onclick = saveSessionStorage; btn_2.onclick = loadSessionStorage; btn_3.onclick = saveLocalStorage; btn_4.onclick = loadLocalStorage; function saveSessionStorage(){ sessionStorage.setItem('msg',text_1.value + 'session'); } function loadSessionStorage(){ mag.innerHTML = sessionStorage.getItem('msg'); } function saveLocalStorage(){ localStorage.setItem('msg',text_1.value + 'local'); } function loadLocalStorage(){ mag.innerHTML = localStorage.getItem('msg'); } //记录页面次数 var local_count = localStorage.getItem('a_count')?localStorage.getItem('a_count'):0; getE('local_count').innerHTML = local_count; localStorage.setItem('a_count',+local_count+1); var session_count = sessionStorage.getItem('a_count')?sessionStorage.getItem('a_count'):0; getE('session_count').innerHTML = session_count; sessionStorage.setItem('a_count',+session_count+1); </script> <form action="#" method="get" accept-charset="utf-8"> <p class="form_item"><label for="">昵称：</label><input type="text" name="" value="" id="name" required
