HTML5 本地存储

最新推荐文章于 2024-04-29 23:47:34 发布

荔枝

最新推荐文章于 2024-04-29 23:47:34 发布

阅读量466

点赞数

分类专栏： html5 文章标签： html5 function 数据库 button input sql

本文链接：https://blog.csdn.net/a569171010/article/details/7467468

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近比较闲，于是抽空了解了一下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="保存数据" οnclick="saveStorage('input');" />
<input type="button" value="读取数据" οnclick="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 οnlοad="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" οnclick="saveData()" /></div>
</dl>
<table id="datatable" border="1"></table>
</body>
</html>

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

荔枝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 本地存储

最近比较闲，于是抽空了解了一下html5本地存储，很好玩很强大。目前支持浏览器：Chrome，opera, safari内容：web storage 和 SQL Lite本地数据库效果：web storage：点击保存数据就将input数据保存，读取数据便会将数据列出在input上面SQL Lite本地数据库：填写完name和message之后点击query便会
复制链接

扫一扫