html5本地存儲之localstorage 、本地數據庫、sessionStorage簡單使用示例

2020-03-24 17:09:28

字體：大中小

來源：轉載

供稿：網友

HTML html5本地存儲之localstorage 、本地數據庫、sessionStorage簡單使用示例
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 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 學號 /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就實現了2、sessionStorage
sessionStorage用法與localStorage用法相同，不過sessionStorage在瀏覽器關閉網站時候就會清除，而localStorage會一直保存至瀏覽器中，二者酌情配合使用。3、本地數據庫
熟悉IOS/Android開發的同學，應該會對SQLite數據庫比較熟悉
html5中對數據庫的操作比較簡單，主要有openDatabase方法和transaction方法
用一個對象db來接收openDatabase創建的訪問數據庫的對象
復制代碼代碼如下:
var db = openDatabase(databasename,version,description,size)
其中
databasename:數據庫名
version：數據庫版本可不填
desription：數據庫描述
size：數據庫分配空間大小

transaction方法用一個回調函數作為參數，在函數中執行具體的訪問數據庫的方法
復制代碼代碼如下:
db.transaction(function(tx)){
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
});
executeSql方法的四個參數分別是：sqlQuery：需要具體執行的sql語句，create||select||update||delete；[value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將sql語句中所要使用的參數先用 ? 代替，然后依次將這些參數組成數組放在第二個參數中；dataHandler：執行成功回調函數；errorHandler：執行失敗回調函數；html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：如何讓Flash不遮擋HTML div元素的技巧

下一篇：html5 音樂播放器 audio 標簽使用概述