這篇文章給大家介紹html5本地存儲(chǔ)中的localstorage和本地?cái)?shù)據(jù)庫(kù)與sessionStorage的使用方法，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對(duì)營(yíng)銷、技術(shù)、服務(wù)都有自己獨(dú)特見(jiàn)解，公司采取“創(chuàng)意+綜合+營(yíng)銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時(shí)，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來(lái)將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級(jí)，滿足企業(yè)一站式網(wǎng)絡(luò)營(yíng)銷推廣需求，讓再小的高端網(wǎng)站設(shè)計(jì)也能產(chǎn)生價(jià)值！

html5的一個(gè)非常cool的功能，就是web storage，類似于之前的cookie，不過(guò)與之不同的是，web storage 擁有本地5兆的容量可以存儲(chǔ)，而cookie卻只有4K，這是完全不能比的優(yōu)勢(shì)。
webstrange又分為：localstorage，sessionstorage和本地?cái)?shù)據(jù)庫(kù)。
接下來(lái)我就來(lái)一一介紹：
1、localstorage
localstorage 的使用比較簡(jiǎn)單，方法有：

代碼如下:

localStorage.setItem(key,value);//保存數(shù)據(jù)
localStorage.getItem(key);//讀取數(shù)據(jù)
localStorage.removeItem(key);//刪除單個(gè)數(shù)據(jù)
localStorage.clear();//刪除所有數(shù)據(jù)
key：localStorage.key(index);//得到某個(gè)索引的值

一個(gè)小demo來(lái)展示功能：

代碼如下:

(function($){
    $(function(){
        $.fn.getFormParam=function(){
            var serializeObj={};
            var array=this.serializeArray();
            var str=this.serialize();
            $(array).each(function(){
                if(serializeObj[this.name]){
                    if($.isArray(serializeObj[this.name])){
                        serializeObj[this.name].push(this.value);
                    }else{
                        serializeObj[this.name]=[serializeObj[this.name],this.value];
                    }
                }else{
                    serializeObj[this.name]=this.value;
                }
            });
            return serializeObj;
        };

        var storageFile =JSON.parse(window.localStorage.getItem('demo'));
        $.each(storageFile, function(i, val){
            $('#demoForm').find('[name="'+i+'"]').val(val);
        });
        $('#demoForm').find('[type="submit"]').on('click', function(){
            var data = $('#demoForm').getFormParam();
            window.localStorage.setItem('demo', JSON.stringify(data));
            return false;
        });
    });
})(jQuery)

html 代碼：

代碼如下:

    
    
    
    


    
        
姓名
        
年齡
        
學(xué)號(hào)
        
地址
        
愛(ài)好
        
其他
        

    

這樣，一個(gè)簡(jiǎn)單的展示localstorage 的 demo就實(shí)現(xiàn)了

2、sessionStorage
sessionStorage用法與localStorage用法相同，不過(guò)sessionStorage在瀏覽器關(guān)閉網(wǎng)站時(shí)候就會(huì)清除，而localStorage會(huì)一直保存至瀏覽器中，二者酌情配合使用。

3、本地?cái)?shù)據(jù)庫(kù)
熟悉IOS/Android開(kāi)發(fā)的同學(xué)，應(yīng)該會(huì)對(duì)SQLite數(shù)據(jù)庫(kù)比較熟悉
html5中對(duì)數(shù)據(jù)庫(kù)的操作比較簡(jiǎn)單，主要有openDatabase方法和transaction方法
用一個(gè)對(duì)象db來(lái)接收openDatabase創(chuàng)建的訪問(wèn)數(shù)據(jù)庫(kù)的對(duì)象

代碼如下:

var db = openDatabase(databasename,version,description,size)

其中
databasename:數(shù)據(jù)庫(kù)名
version：數(shù)據(jù)庫(kù)版本 可不填
desription：數(shù)據(jù)庫(kù)描述
size：數(shù)據(jù)庫(kù)分配空間大小
transaction方法用一個(gè)回調(diào)函數(shù)作為參數(shù)，在函數(shù)中執(zhí)行具體的訪問(wèn)數(shù)據(jù)庫(kù)的方法

代碼如下:

db.transaction(function(tx)){
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
});

executeSql方法的四個(gè)參數(shù)分別是：

sqlQuery：需要具體執(zhí)行的sql語(yǔ)句，create||select||update||delete；

[value1,value2..]：sql語(yǔ)句中所有使用到的參數(shù)的數(shù)組，在executeSql方法中，將sql語(yǔ)句中所要使用的參數(shù)先用“?”代替，然后依次將這些參數(shù)組成數(shù)組放在第二個(gè)參數(shù)中；

dataHandler：執(zhí)行成功回調(diào)函數(shù)；

errorHandler：執(zhí)行失敗回調(diào)函數(shù)；

關(guān)于html5本地存儲(chǔ)中的localstorage和本地?cái)?shù)據(jù)庫(kù)與sessionStorage的使用方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。