Html5 Step by Step(二) 本地存储

最新推荐文章于 2025-09-06 09:33:29 发布

转载最新推荐文章于 2025-09-06 09:33:29 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Henllyee/archive/2012/02/26/Html5_Third.html

文章标签：

#数据库 #javascript #git #ViewUI

本文介绍了HTML5中的WebStorage机制，包括sessionStorage和localStorage的区别及使用方法，并通过示例演示了如何实现数据的保存和读取。此外还探讨了WebSql数据库的应用，展示了创建表、插入和查询数据的具体操作。

在上篇的文章中我们看过了Html5中拖动API，本篇文章中会就HTML5中的Web Storage、本地数据库进行一些简单的介绍。

Web Storage

在Html4时代，如果我们需要把数据存在客户端，我们想到的就是Cookie。但是Cookie本来就有很多不好的地方，比如Cookie的里面存储的大小只能是4kb;每次请求时都会将Cookie信息包含在请求信息中，增加了额外的带宽。在Html5中，提供了sessionStorage跟localStorage来进行本地数据的存储。

sessionStorage：数据的存储只在特定的会话中，数据只会保留到浏览器关闭之前，适合保存临时数据；
localStorage:存储在本地硬盘上面，持久化存在，适合保存长时间数据。

sessionStorage、localStorage支持的方法：

方法名	作用
setItem(key,value)	保存数据
getItem(key)	获取数据
removeItem(key)	提出健值
clear	清除数据

WebStorage Demo

下面做个简单的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');
}

运行效果：

Web Sql DataBase

在Html5中同时提供了一个可以通过SQL语言来访问的本地数据库，我们可以轻松的进行访问。在使用Web Sql DataBase时，我们主要需要两个步骤：

创建或则打开数据库；
创建事务，通过事物执行SQL。

创建数据库,我们通过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浏览器，我们可以看到数据库里面的数据：