html5本地儲存之localstorage 、本機資料庫、sessionStorage簡單使用範例_html5教學技巧
html5的一個非常cool的功能，就是web storage，類似於之前的cookie，不過與之不同的是，web storage 擁有本地5兆的容量可以存儲，而cookie卻只有4K，這是完全不能比的優勢。
webstrange又分為：localstorage，sessionstorage和本地資料庫。
接下來我就來一一介紹：
1、localstorage
localstorage 的使用比較簡單，方法有：
程式碼如下:
localStorage.setItem(key,value);//保存数据 localStorage.getItem(key);//读取数据 localStorage.removeItem(key);//删除单个数据 localStorage.clear();//删除所有数据 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> <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>学号</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>
html 程式碼：
2、sessionStorage
sessionStorage用法與localStorage用法相同，不過sessionStorage在瀏覽器關閉網站時候就會清除，而在瀏覽器關閉網站時候就會清除，而localStorage會一直儲存到瀏覽器中，二者會酌情配合使用。
var db = openDatabase(databasename,version,description,size)
html5中對資料庫的操作比較簡單，主要有openDatabase方法和transaction方法
用一個物件db來接收openDatabase所建立的存取資料庫的物件
其中
databasename:資料庫名稱
version：資料庫版本可不填
db.transaction(function(tx)){
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
});transaction方法以一個回呼函數作為參數，在函數中執行特定的存取資料庫的方法
executeSql方法的四個參數分別是：
sqlQuery：需要具體執行的sql語句，create||select||update||delete；
[value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將sql語句中所要使用的參數先用「?」代替，然後依序將這些參數組成數組放在第二個參數中；
dataHandler：執行成功回呼函數；
errorHandler：執行失敗回呼函數；
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
