ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 ローカル ストレージ localstorage、ローカル データベース、sessionStorage の簡単な使用例_html5 チュートリアル スキル
HTML5 ローカル ストレージ localstorage、ローカル データベース、sessionStorage の簡単な使用例_html5 チュートリアル スキル
- PHP中文网オリジナル
- 2016-05-16 15:47:551650ブラウズ
HTML5 の非常に優れた機能は Web ストレージで、これは以前の Cookie に似ていますが、違いは、Web ストレージには保存できるローカル容量が 5 MB であるのに対し、Cookie はわずか 4K であり、まったく比較できない利点があります。 。
Webstrange は、ローカルストレージ、セッションストレージ、ローカルデータベースに分かれています。
次に、それらを 1 つずつ紹介します。
1. localstorage
localstorage の使用方法は次のとおりです。 >コードは次のとおりです:
localStorage.setItem(key,value);//保存数据 localStorage.getItem(key);//读取数据 localStorage.removeItem(key);//删除单个数据 localStorage.clear();//删除所有数据 key：localStorage.key(index);//得到某个索引的值
コードは次のとおりです:
html コード:(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)<!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>
このようにして、localstorage を示す簡単なデモが実現されます
2. sessionStorage
sessionStorage の使い方は localStorage と同じです。ただし、sessionStorage はブラウザが Web サイトを閉じるとクリアされ、localStorage は常にブラウザに保存され、必要に応じて 2 つを併用できます。
3. ローカル データベース
html5 でのデータベースの操作は、主に openDatabase メソッドとトランザクションを含めて比較的単純ですメソッド
オブジェクト db を使用して、openDatabase によって作成されたオブジェクトを受け取り、データベース
var db = openDatabase(databasename,version,description,size)databasename: データベース名
version: データベースのバージョンはオプションです
説明:データベースの説明
size : データベース割り当て領域のサイズ
トランザクション メソッドはコールバック関数をパラメータとして使用し、関数
db.transaction(function(tx)){
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
});sqlQuery: 特に実行する必要がある SQL ステートメント、create||select||update||delete;
[value1, value2..] : SQL ステートメントで使用されるすべてのパラメーターの配列。executeSql メソッドでは、まず SQL ステートメントで使用するパラメーターを「?」に置き換えてから、これらのパラメーターを順番に配列に入れ、2 番目のパラメーターに入れます。パラメータ;
dataHandler: 実行成功のコールバック関数;
errorHandler: 実行失敗のコールバック関数;
上記は、localstorage、ローカルデータベース、sessionStorage の簡単な使用例の内容です。 html5 ローカル ストレージ_html5 チュートリアル スキルの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。