HTML5 本地存储

来源：互联网发布：淘宝的市场需求分析编辑：程序博客网时间：2024/04/29 17:14

最近比较闲，于是抽空了解了一下html5本地存储，很好玩很强大。

目前支持浏览器：Chrome，opera, safari

内容：web storage 和 SQL Lite本地数据库

效果：

web storage：

点击保存数据就将input数据保存，读取数据便会将数据列出在input上面

SQL Lite本地数据库：

填写完name和message之后点击query便会插入数据，同时更新数据到页面上。

首先我们看下web storage代码：

<!DOCTYPE html><head><title>web storage test</title></head><script type="text/javascript">function saveStorage(id){    var target = document.getElementById(id),        str = target.value;    localStorage.setItem("msg",str);//插入数据    //sessionStorage.setItem("msg",str);    //sessionStorage 和 localStorage 的差别和session与cookie差别一样，生命周期不同。}                                                                                                                                                                             function loadStorage(id){    var target = document.getElementById(id),        str = localStorage.getItem("msg");//取出数据        //str = sessionStorage.getItem("msg");    target.innerHTML = str;}</script><body><h1>web storage 示例</h1><p id="msg"></p><input type="text" id="input" /><input type="button" value="保存数据" onclick="saveStorage('input');" /><input type="button" value="读取数据" onclick="loadStorage('msg');" /></body></html>

代码很简单一看就清楚了，下面我们来看看SQL Lite本地数据库的例子，我写的是一个简单的留言板功能：

<!DOCTYPE html><head><meta charset="UTF-8"><title>message board</title><style type="text/css">.leave_message{width:284px;}.leave_message dd,.leave_message dt{float:left;}.leave_message dt{width:50px;}.cb{clear:both;}.query{   edui-filter-align-center   }</style><script type="text/javascript">function getLocTime(nS) {//时间戳转换成标准时间    var t = new Date();    t.setTime(nS);    return t;}var datatable = null,db = openDatabase('Mydata','','My Database', 102400);//创建数据库， 参数1：数据库名， 参数2：数据库描述，参数3：数据库大小                                                                                                                     function init(){    datatable = document.getElementById("datatable");    showAllData();}                                                                                                                     function showData(row){    var tbody = document.createElement('tr');    tbody.innerHTML = '<td>'+row.name+'</td><td>'+row.message+'</td><td>'+getLocTime(row.time)+'</td>'    datatable.appendChild(tbody);}                                                                                                                     function removeAllData(){    datatable.innerHTML = '';    var tr = document.createElement('tr');    tr.innerHTML = '<th>name</th><th>message</th><th>date</th>';    datatable.appendChild(tr);}function showAllData(){    db.transaction(function(tx){        tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTGER)',[]);//创建表        tx.executeSql('SELECT * FROM MsgData',[],function(tx,rs) {//回调函数            removeAllData();            for(var i=0; i<rs.rows.length;i++){                showData(rs.rows.item(i));            }        });    });}                                                                                                                     function addData(name,memo,time){    db.transaction(function(tx){        tx.executeSql('INSERT INTO MsgData VALUES(?, ?, ?)',[name,memo,time],function(tx, rs){//参数1，sql语句 “？”表示用后面的数组填充，参数3表示回调函数，参数4，错误处理函数                                                                                                                                     },        function(tx,error){            alert(error.source+'::'+error.message);        });    });}                                                                                                                     function saveData(){    var name = document.getElementById("name").value,        memo = document.getElementById("message").value,        time = new Date().getTime();        addData(name,memo,time);        showAllData();}</script></head><body onload="init()"><dl class="leave_message"><dt>name:</dt><dd><input type="text" id="name" value="" /></dd><dt>message:</dt><dd><textarea id="message"></textarea></dd><div class="cb"></div><div class="query"><input type="button" value="Query" onclick="saveData()" /></div></dl><table id="datatable" border="1"></table></body></html>

代码虽然看似很多，其实看方法名就清楚流程了。