一浸赫、本地存儲(chǔ)由來(lái)的背景

由于HTML4時(shí)代Cookie的大小、格式元旬、存儲(chǔ)數(shù)據(jù)格式等限制榴徐，網(wǎng)站應(yīng)用如果想在瀏覽器端存儲(chǔ)用戶的部分信息，那么只能借助于Cookie匀归。但是Cookie的這些限制坑资，也就導(dǎo)致了Cookie只能存儲(chǔ)一些ID之類的標(biāo)識(shí)符等簡(jiǎn)單的數(shù)據(jù)。

下面是Cookie的限制：

• 大多數(shù)瀏覽器支持最大為 4096 字節(jié)的Cookie穆端。
• 瀏覽器還限制站點(diǎn)可以在用戶計(jì)算機(jī)上存儲(chǔ)的Cookie的數(shù)量袱贮。大多數(shù)瀏覽器只允許每個(gè)站點(diǎn)存儲(chǔ) 20 個(gè)Cookie；如果試圖存儲(chǔ)更多Cookie体啰，則最舊的Cookie便會(huì)被丟棄攒巍。
• 有些瀏覽器還會(huì)對(duì)它們將接受的來(lái)自所有站點(diǎn)的Cookie總數(shù)作出絕對(duì)限制，通常為 300 個(gè)荒勇。
• Cookie默認(rèn)情況都會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器柒莉，但并不是所有請(qǐng)求都需要Cookie的，比如：js沽翔、css兢孝、圖片等請(qǐng)求則不需要Cookie。

為了破解Cookie的一系列限制搀擂，HTML5通過(guò)JS的新的API就能直接存儲(chǔ)大量的數(shù)據(jù)到客戶端瀏覽器西潘，而且支持復(fù)雜的本地?cái)?shù)據(jù)庫(kù)，讓JS更有效率哨颂。 HTML5支持兩種的WebStorage：

• 永久性的本地存儲(chǔ)（localStorage）
• 會(huì)話級(jí)別的本地存儲(chǔ)（sessionStorage）

二喷市、永久性的本地存儲(chǔ)：localStorage

在最新的JS的API中增加了localStorage對(duì)象，以便于用戶存儲(chǔ)永久存儲(chǔ)的Web端的數(shù)據(jù)威恼。而且數(shù)據(jù)不會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器品姓，而且存儲(chǔ)數(shù)據(jù)的大小機(jī)會(huì)不用考慮，因?yàn)樵贖TML5的標(biāo)準(zhǔn)中要求瀏覽器至少要支持到4MB.所以箫措，這完全是顛覆了Cookie的限制腹备，為Web應(yīng)用在本地存儲(chǔ)復(fù)雜的用戶痕跡數(shù)據(jù)提供非常方便的技術(shù)支持。接下來(lái)就將介紹localStorage的常用的方法斤蔓。

localStorage提供了四個(gè)方法來(lái)輔助我們進(jìn)行對(duì)本地存儲(chǔ)做相關(guān)操作植酥。

• setItem(key,value)添加本地存儲(chǔ)數(shù)據(jù)。兩個(gè)參數(shù)，非常簡(jiǎn)單就不說(shuō)了友驮。
• getItem(key)通過(guò)key獲取相應(yīng)的Value漂羊。
• removeItem(key)通過(guò)key刪除本地?cái)?shù)據(jù)。
• clear()清空數(shù)據(jù)卸留。

<script type="text/javascript">
    //添加key-value 數(shù)據(jù)到 sessionStorage
    localStorage.setItem("demokey", "http://www.shiyanlou.com");
    //通過(guò)key來(lái)獲取value
    var dt = localStorage.getItem("demokey");
    alert(dt);
    //清空所有的key-value數(shù)據(jù)走越。
    //localStorage.clear();
    alert(localStorage.length);
</script>

三、會(huì)話級(jí)別的本地存儲(chǔ)：sessionStorage

在HTML5中增加了一個(gè)Js對(duì)象：sessionStorage耻瑟；通過(guò)此對(duì)象可以直接操作存儲(chǔ)在瀏覽器中的會(huì)話級(jí)別的WebStorage旨指。存儲(chǔ)在sessionStorage中的數(shù)據(jù)首先是Key-Value形式的，另外就是它跟瀏覽器當(dāng)前會(huì)話相關(guān)喳整，當(dāng)會(huì)話結(jié)束后谆构，數(shù)據(jù)會(huì)自動(dòng)清除，跟未設(shè)置過(guò)期時(shí)間的Cookie類似框都。

sessionStorage提供了四個(gè)方法來(lái)輔助我們進(jìn)行對(duì)本地存儲(chǔ)做相關(guān)操作低淡。

• setItem(key,value)添加本地存儲(chǔ)數(shù)據(jù)。兩個(gè)參數(shù)瞬项，非常簡(jiǎn)單就不說(shuō)了。
• getItem(key)通過(guò)key獲取相應(yīng)的Value何荚。
• removeItem(key)通過(guò)key刪除本地?cái)?shù)據(jù)囱淋。
• clear()清空數(shù)據(jù)。

<script type="text/javascript">
    //添加key-value 數(shù)據(jù)到 sessionStorage
    sessionStorage.setItem("demokey", "http://blog.itjeek.com");
    //通過(guò)key來(lái)獲取value
    var dt = sessionStorage.getItem("demokey");
    alert(dt);
    //清空所有的key-value數(shù)據(jù)餐塘。
    //sessionStorage.clear();
    alert(sessionStorage.length);
</script>

四妥衣、強(qiáng)大的本地?cái)?shù)據(jù)

雖然HTML5已經(jīng)提供了功能強(qiáng)大的localStorage和sessionStorage，但是他們兩個(gè)都只能提供存儲(chǔ)簡(jiǎn)單數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)戒傻，對(duì)于復(fù)雜的Web應(yīng)用的數(shù)據(jù)卻無(wú)能為力税手。逆天的是HTML5提供了一個(gè)瀏覽器端的數(shù)據(jù)庫(kù)支持，允許我們直接通JS的API在瀏覽器端創(chuàng)建一個(gè)本地的數(shù)據(jù)庫(kù)需纳，而且支持標(biāo)準(zhǔn)的SQL的CRUD操作芦倒，讓離線的Web應(yīng)用更加方便的存儲(chǔ)結(jié)構(gòu)化的數(shù)據(jù)。接下里介紹一下本地?cái)?shù)據(jù)的相關(guān)API和用法不翩。

操作本地?cái)?shù)據(jù)庫(kù)的最基本的步驟是：

• 第一步：openDatabase方法：創(chuàng)建一個(gè)訪問(wèn)數(shù)據(jù)庫(kù)的對(duì)象兵扬。
• 第二步：使用第一步創(chuàng)建的數(shù)據(jù)庫(kù)訪問(wèn)對(duì)象來(lái)執(zhí)行transaction方法，通過(guò)此方法可以設(shè)置一個(gè)開啟事務(wù)成功的事件響應(yīng)方法口蝠，在事件響應(yīng)方法中可以執(zhí)行SQL.
• 第三步：通過(guò)executeSql方法執(zhí)行查詢器钟，當(dāng)然查詢可以是：CRUD。

接下來(lái)分別介紹一下相關(guān)的方法的參數(shù)和用法妙蔗。

1傲霸、 openDatabase方法

//Demo：獲取或者創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)，如果數(shù)據(jù)庫(kù)不存在那么創(chuàng)建之
var dataBase = openDatabase("student", "1.0", "學(xué)生表", 1024 * 1024, function () { });

openDatabase方法打開一個(gè)已經(jīng)存在的數(shù)據(jù)庫(kù)，如果數(shù)據(jù)庫(kù)不存在昙啄，它還可以創(chuàng)建數(shù)據(jù)庫(kù)穆役。幾個(gè)參數(shù)意義分別是：

• 數(shù)據(jù)庫(kù)名稱。
• 數(shù)據(jù)庫(kù)的版本號(hào)跟衅，目前來(lái)說(shuō)傳個(gè)1.0就可以了孵睬，當(dāng)然可以不填；
• 對(duì)數(shù)據(jù)庫(kù)的描述伶跷。
• 設(shè)置分配的數(shù)據(jù)庫(kù)的大嘘痢（單位是kb）。
• 回調(diào)函數(shù)(可省略)叭莫。

初次調(diào)用時(shí)創(chuàng)建數(shù)據(jù)庫(kù)蹈集，以后就是建立連接了。

2.雇初、db.transaction方法

可以設(shè)置一個(gè)回調(diào)函數(shù)拢肆，此函數(shù)可以接受一個(gè)參數(shù)就是我們開啟的事務(wù)的對(duì)象。然后通過(guò)此對(duì)象可以執(zhí)行SQL腳本靖诗。

3.郭怪、executeSql方法執(zhí)行查詢

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

參數(shù)說(shuō)明：

• qlQuery：需要具體執(zhí)行的sql語(yǔ)句，可以是create刊橘、select鄙才、update、delete;
• [value1,value2..]：sql語(yǔ)句中所有使用到的參數(shù)的數(shù)組促绵，在executeSql方法中攒庵，將s>語(yǔ)句中所要使用的參數(shù)先用“?”代替，然后依次將這些參數(shù)組成數(shù)組放在第二個(gè)參數(shù)中;
• dataHandler：執(zhí)行成功是調(diào)用的回調(diào)函數(shù)败晴，通過(guò)該函數(shù)可以獲得查詢結(jié)果集;
• errorHandler：執(zhí)行失敗時(shí)調(diào)用的回調(diào)函數(shù);

綜合實(shí)例

<head>
 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function initDatabase() {
            var db = getCurrentDb();//初始化數(shù)據(jù)庫(kù)
            if(!db) {alert("您的瀏覽器不支持HTML5本地?cái)?shù)據(jù)庫(kù)");return;}
            db.transaction(function (trans) {//啟動(dòng)一個(gè)事務(wù)浓冒，并設(shè)置回調(diào)函數(shù)
                //執(zhí)行創(chuàng)建表的Sql腳本
                trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
                }, function (trans, message) {//消息的回調(diào)函數(shù)alert(message);});
            }, function (trans, result) {
            }, function (trans, message) {
            });
        }
        $(function () {//頁(yè)面加載完成后綁定頁(yè)面按鈕的點(diǎn)擊事件
            initDatabase();
            $("#btnSave").click(function () {
                var txtName = $("#txtName").val();
                var txtTitle = $("#txtTitle").val();
                var txtWords = $("#txtWords").val();
                var db = getCurrentDb();
                //執(zhí)行sql腳本，插入數(shù)據(jù)
                db.transaction(function (trans) {
                    trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
                    }, function (ts, message) {
                        alert(message);
                    });
                });
                showAllTheData();
            });
        });
        function getCurrentDb() {
            //打開數(shù)據(jù)庫(kù)尖坤，或者直接連接數(shù)據(jù)庫(kù)參數(shù)：數(shù)據(jù)庫(kù)名稱稳懒，版本，概述慢味，大小
            //如果數(shù)據(jù)庫(kù)不存在那么創(chuàng)建之
            var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
            return db;
        }
        //顯示所有數(shù)據(jù)庫(kù)中的數(shù)據(jù)到頁(yè)面上去
        function showAllTheData() {
            $("#tblData").empty();
            var db = getCurrentDb();
            db.transaction(function (trans) {
                trans.executeSql("select * from Demo ", [], function (ts, data) {
                    if (data) {
                        for (var i = 0; i < data.rows.length; i++) {
                            appendDataToTable(data.rows.item(i));//獲取某行數(shù)據(jù)的json對(duì)象
                        }
                    }
                }, function (ts, message) {alert(message);var tst = message;});
            });
        }
        function appendDataToTable(data) {//將數(shù)據(jù)展示到表格里面
            //uName,title,words
            var txtName = data.uName;
            var txtTitle = data.title;
            var words = data.words;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+txtName+"</td>";
            strHtml += "<td>" + txtTitle + "</td>";
            strHtml += "<td>" + words + "</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }
    </script>
</head>
    <body>
        <table>
            <tr>
                <td>用戶名：</td>
                <td><input type="text" name="txtName" id="txtName" required/></td>
            </tr>
               <tr>
                <td>標(biāo)題：</td>
                <td><input type="text" name="txtTitle" id="txtTitle" required/></td>
            </tr>
            <tr>
                <td>留言：</td>
                <td><input type="text" name="txtWords" id="txtWords" required/></td>
            </tr>
        </table>
        <input type="button" value="保存" id="btnSave"/>
        <hr/>
        <input type="button" value="展示所喲數(shù)據(jù)" onclick="showAllTheData();"/>
        <table id="tblData">
        </table>
    </body>
</html>