2012-02-26 21:00 Henry Cui 阅读(3123) 评论() 收藏 举报
在上篇的文章中我们看过了Html5中拖动API，本篇文章中会就HTML5中的Web Storage、本地数据库进行一些简单的介绍。
在Html4时代，如果我们需要把数据存在客户端，我们想到的就是Cookie。但是Cookie本来就有很多不好的地方，比如Cookie的里面存储的大小只能是4kb;每次请求时都会将Cookie信息包含在请求信息中，增加了额外的带宽。在Html5中，提供了sessionStorage跟localStorage来进行本地数据的存储。
sessionStorage、localStorage支持的方法：
| 方法名 | 作用 |
| setItem(key,value) | 保存数据 |
| getItem(key) | 获取数据 |
| removeItem(key) | 提出健值 |
| clear | 清除数据 |
下面做个简单的Demo，从一个输入框中获取值保存到sessionStorage中，然后读取出来显示。
HTML:
<body> <div id="msg"></div> <input type="text" id="input" /> <input type="button" value="Save Data" onclick="saveData('input')" /> <input type="button" value="Get Data" onclick="getData('msg')" /> </body>
Javascript:
function saveData(id) { var txt = document.getElementById(id); sessionStorage.setItem('data',txt.value); } function getData(id) { var msg = document.getElementById(id); msg.innerHTML = sessionStorage.getItem('data'); }
运行效果：
在Html5中同时提供了一个可以通过SQL语言来访问的本地数据库，我们可以轻松的进行访问。在使用Web Sql DataBase时，我们主要需要两个步骤：
创建数据库,我们通过openDataBase方法创建一个访问数据库对象：
var db = openDatabase('MyData', '', 'My Data', 404800);
创建完成数据库之后我们可以通过数据的事物来创建表、读写数据。
创建表：
db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT, time INTEGER)', []); });
写入数据：
tx.executeSql('INSERT INTO MsgData VALUES(?,?,?)', [name, msg, new Date().getTime()], function (tx, rs) { alert('Add data successful!'); }, function (tx, error) { alert(error.source + ":" + error.message); });
在上面的方法中我们看到两个回掉函数，第一个回调函数的表示执行SQL成功后的回调，第二个回掉函数是执行失败的回调函数。在我们执行查询时，查询成功之后，结果会放在rs里面。
这里面我们做一个Demo，一个留言板的Demo，将数据存入Web Sql DataBase里面。具体代码这里就不贴出来，代码在我的Git里面的WebSqlDataBase查看。通过Chrome浏览器，我们可以看到数据库里面的数据：
其中MyData为Demo中建立的数据库，MsgData为表名，右侧的则是增加的记录。
在本篇Post中，我们看过了WebStorage跟WebSqlDataBase，通过这个功能其实为我们做Web Appliction提供很大的帮助。（WebStorage代码地址在此）。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。