Web Storage概述和本機資料庫

上一篇：HTML5筆記2－HTML5音/影片標籤詳解

Web Storage概述

在HTML5中，除了Canvas元素之外，另一個新增的非常重要的功能是可以再客戶端本地保存資料的Web Storage功能，之前可以使用Cookies在客戶端

#保存諸如用戶名等簡單用戶信息，但透過長期使用，人們發現使用Cookies存儲永久數據存在幾個問題。

• 大小：Cookies的大小被限制在4KB

• #頻寬：Cookies是隨HTTP失誤一起被發送的，因此會浪費一部分發送Cookies時使用的頻寬

• 複雜性：要正確的操縱Cookies是很困難的。

針對以上問題，HTML5中，重新提供了一中在客戶端本機儲存資料的功能，他就是Web Storage。

Web Storage功能。

顧名思義，Web Storage功能就是在Web上儲存資料的功能，這裡的儲存是針對客戶端本地而言的。具體分為兩種：

sessionStorage：將資料保存在session物件中。 session是指使用者在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是使用者瀏覽

覽這個網站所花費的時間。 session物件可以用來保存在這段時間內所要保存的任何資料。

localStorage：將資料保存在客戶端本地的硬體設備（硬碟）中，即使瀏覽器關閉了，該資料仍然存在，下一次打開瀏覽器訪問網站時仍然可以

繼續使用。 localstorage 是透過鍵值對來儲存的。

開發工具我使用HBuilder.exe

新Test.html頁面，程式碼如下：

##

<title></title><meta><script>function saveSessiontorage(id) {var targat = document.getElementById(id);var str = targat.value;
                sessionStorage.setItem("msg", str);
            }function getSessionStorage(id) {var targat = document.getElementById(id);var msg = sessionStorage.getItem("msg");
                targat.innerHTML = msg;
            }function saveLocalStorage(id) {var targat = document.getElementById(id);var str = targat.value;
                localStorage.setItem("msg", str);
            }function getLocalStorage(id) {var targat = document.getElementById(id);var msg = localStorage.getItem("msg");
                targat.innerHTML = msg;
            }</script><p></p><input><input><input><p></p><p>    <input></p><input><input>

View Code

localStorage關閉瀏覽器之後再打開，讀取資料依舊存在，而sessionStorage#關閉瀏覽器之後再開啟讀取資料就不見了。

作為簡單資料庫來利用

 將Web Storage作為簡易資料庫，如果能解決資料檢索，對列進行管理，就可以將Web Storage作為資料庫來利用了。

新Register.html頁面，程式碼如下：

#

nbsp;html><meta><title></title><script>function addUser () {var data=new Object;
                data.name=document.getElementById("txtName").value;
                data.phone=document.getElementById("txtPhone").value;
                data.address=document.getElementById("txtAddress").value;var str=JSON.stringify(data);
                localStorage.setItem(data.name,str);
                alert("注册成功");
            }function search (txt) {var filed=document.getElementById(txt).value;var str=localStorage.getItem(filed);var data=JSON.parse(str);var result="用户名："+data.name+""+"电话："+data.phone+""+"地址："+data.address
                document.getElementById("txtMsg").innerHTML=result;
            }</script><div>用户名:<input>
</div><div>电话号码:<input>
</div><div>地址:<input>
</div><div><input></div><br><div>用户名：<input><input>
</div><div></div>

View Code

HTML5 本機資料庫

在HTML5中，大大豐富了客戶端本機可以儲存的內容，增加了許多功能將原本必須儲存在伺服器上的資料轉為儲存在客戶端本地，從而大大提高了Web應用程式效能，減輕了伺服器的負擔，使用Web時代重新回到了「客戶端為重、伺服器端為輕」的時代。在HTML5中內建了兩種本機資料庫，一種為SQLLite，一種為indexedDB。

用executeSql來執行查詢1.transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
2.function dataHandler(transaction,results);
3.function errorHandler(transaction,errmsg);
4.rows.length取得記錄的條數

新建SqlTest.html，程式碼如下：

nbsp;html><meta><title></title><script>var db=openDatabase("mydb","1.0","test db",1024*100); //参数分别为：(数据库名称，版本号，描述，大小) 如果数据库不存在则创建//            db.transaction(function(tx) {//                tx.executeSql("")//            })            transaction.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg,TEXT,createtime INTERGER)",[],function(){},function(){});//参数：(sql语句，sql参数数组，执行成功的回调函数，执行失败的回调函数)</script>

#HTML5 indexedDB資料庫

在HTML5中，新增了一種稱為「indexedDB」的資料庫，該資料庫是一種儲存在客戶端本機的NoSQL資料庫.

新IndexedDBTest.html，程式碼如下：

nbsp;html><meta><title></title><script>//统一IndexedDB在不同浏览器的实现            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function connDB () {var dbName="indexedDBTest";var dbVersion=1;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                }</script><input>

##View Code

数据库的版本更新

只是成功链接数据库，我们还不能执行任何数据操作，我们还应该创建相当于关系型数据库中数据表的对象仓库与用于检索数据的索引。

新建versionUpdate.html，代码如下：

nbsp;html><meta><title></title><script>//统一IndexedDB在不同浏览器的实现            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function VersionUpdate () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                    dbConnect.onupgradeneeded=function(e){
                        idb=e.target.result;var ts=e.target.transaction;var oldVersion=e.oldVersion;var newVersion=e.newVersion;
                        alert("数据库更新成功！旧版本号:"+oldVersion+"------新版本号："+newVersion);
                    }
                }</script><input>

View Code

创建对象仓库

对于创建对象仓库与索引的操作，我们只能在版本更新事务内部进行，因为在indexedDB API中不允许数据库中的对象仓库在同一个版本中发生改变。

新建createStorge.html，代码如下：

nbsp;html><meta><title></title><script>//统一IndexedDB在不同浏览器的实现            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function CreateStorge () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                    dbConnect.onupgradeneeded=function(e){
                        idb=e.target.result;var name="user";var optionParams={keyPath:"userid",autoIncrement:false};var store=idb.createObjectStore(name,optionParams);
                        alert("对象仓库创建成功!");
                    }
                }</script><input>

View Code

 

以上是Web Storage概述和本機資料庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！