這篇文章給大家介紹html5本地存儲中的localstorage和本地數(shù)據(jù)庫與sessionStorage的使用方法,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
成都創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司;我們對營銷、技術(shù)、服務(wù)都有自己獨(dú)特見解,公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)!我們經(jīng)歷的每一步也許不一定是最完美的,但每一步都有值得深思的意義。我們珍視每一份信任,關(guān)注我們的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計質(zhì)量和服務(wù)品質(zhì),在得到用戶滿意的同時,也能得到同行業(yè)的專業(yè)認(rèn)可,能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新,服務(wù)升級,滿足企業(yè)一站式網(wǎng)絡(luò)營銷推廣需求,讓再小的高端網(wǎng)站設(shè)計也能產(chǎn)生價值!
html5的一個非常cool的功能,就是web storage,類似于之前的cookie,不過與之不同的是,web storage 擁有本地5兆的容量可以存儲,而cookie卻只有4K,這是完全不能比的優(yōu)勢。
webstrange又分為:localstorage,sessionstorage和本地數(shù)據(jù)庫。
接下來我就來一一介紹:
1、localstorage
localstorage 的使用比較簡單,方法有:
代碼如下:
localStorage.setItem(key,value);//保存數(shù)據(jù) localStorage.getItem(key);//讀取數(shù)據(jù) localStorage.removeItem(key);//刪除單個數(shù)據(jù) localStorage.clear();//刪除所有數(shù)據(jù) key:localStorage.key(index);//得到某個索引的值
一個小demo來展示功能:
代碼如下:
(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; };</p> <p> var storageFile =JSON.parse(window.localStorage.getItem('demo')); $.each(storageFile, function(i, val){ $('#demoForm').find('[name="'+i+'"]').val(val); });</p> <p> $('#demoForm').find('[type="submit"]').on('click', function(){ var data = $('#demoForm').getFormParam(); window.localStorage.setItem('demo', JSON.stringify(data)); return false; }); }); })(jQuery)
html 代碼:
代碼如下:
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <script src="jquery-1.10.2.min.js"></script> <script src="demo.js"></script> <title>Document</title> </head> <body> <form id="demoForm"> <p><label><span>姓名</span><input name="name"></label></p> <p><label><span>年齡</span><input name="age"></label></p> <p><label><span>學(xué)號</span><input name="number"></label></p> <p><label><span>地址</span><input name="address"></label></p> <p><label><span>愛好</span><input name="habit"></label></p> <p><label><span>其他</span><textarea name="big" id="" cols="30" rows="10"></textarea></label></p> <p><input type="submit" value="提交"></p> </form> </body> </html>
這樣,一個簡單的展示localstorage 的 demo就實(shí)現(xiàn)了
2、sessionStorage
sessionStorage用法與localStorage用法相同,不過sessionStorage在瀏覽器關(guān)閉網(wǎng)站時候就會清除,而localStorage會一直保存至瀏覽器中,二者酌情配合使用。
3、本地數(shù)據(jù)庫
熟悉IOS/Android開發(fā)的同學(xué),應(yīng)該會對SQLite數(shù)據(jù)庫比較熟悉
html5中對數(shù)據(jù)庫的操作比較簡單,主要有openDatabase方法和transaction方法
用一個對象db來接收openDatabase創(chuàng)建的訪問數(shù)據(jù)庫的對象
代碼如下:
var db = openDatabase(databasename,version,description,size)
其中
databasename:數(shù)據(jù)庫名
version:數(shù)據(jù)庫版本 可不填
desription:數(shù)據(jù)庫描述
size:數(shù)據(jù)庫分配空間大小
transaction方法用一個回調(diào)函數(shù)作為參數(shù),在函數(shù)中執(zhí)行具體的訪問數(shù)據(jù)庫的方法
代碼如下:
db.transaction(function(tx)){
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
});
executeSql方法的四個參數(shù)分別是:
sqlQuery:需要具體執(zhí)行的sql語句,create||select||update||delete;
[value1,value2..]:sql語句中所有使用到的參數(shù)的數(shù)組,在executeSql方法中,將sql語句中所要使用的參數(shù)先用“?”代替,然后依次將這些參數(shù)組成數(shù)組放在第二個參數(shù)中;
dataHandler:執(zhí)行成功回調(diào)函數(shù);
errorHandler:執(zhí)行失敗回調(diào)函數(shù);
關(guān)于html5本地存儲中的localstorage和本地數(shù)據(jù)庫與sessionStorage的使用方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
當(dāng)前名稱:html5本地存儲中的localstorage和本地數(shù)據(jù)庫與sessionStorage的使用方法
網(wǎng)站URL:http://www.chinadenli.net/article30/ieoeso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、網(wǎng)站設(shè)計、網(wǎng)站收錄、品牌網(wǎng)站制作、App開發(fā)、動態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)