コメント:この記事では、主にHTML5ローカルストレージでLocalStorage、ローカルデータベース、およびSessionStorageの簡単な使用例を紹介します。それを必要とする友達はそれを参照できます。
HTML5の非常にクールな機能は、以前のCookieと同様のWebストレージですが、違いは、Webストレージには5メガバイトの局所容量が保存されていますが、Cookieには4Kしかありません。これは比較できない利点です。
WebStrangeは、localStorage、sessionstorage、およびローカルデータベースにさらに分割されています。
次に、1つずつ紹介します。
1。LocalStorage
LocalStorageの使用は比較的単純で、方法は次のとおりです。
localStorage.setItem(key、value); //データを保存します
localStorage.getItem(key); //データを読み取ります
LocalStorage.RemoveItem(key); //個々のデータを削除します
localStorage.clear(); //すべてのデータを削除します
キー:localStorage.key(index); //特定のインデックスの値を取得します
関数を表示するための小さなデモ:
(function($){
$(function(){
$ .fn.getFormParam = function(){
var serializeobj = {};
var array = this.serializearray();
var str = this.serialize();
$(array).each(function(){
if(serializeobj [this.name]){
if($
serializeobj [this.name] .push(this.value);
}それ以外{
serializeobj [this.name] = [serializeobj [this.name]、this.value];
}
}それ以外{
serializeobj [this.name] = this.value;
}
});
serializeobjを返します。
}; </p> <p> var StorageFile = json.parse(window.localStorage.getItem( 'demo'));
$ .each(storeadfile、function(i、val){
$( '#demoform')。find( '[name = "'+i+'"]')。
}); </p> <p> $( '#demoform')。
var data = $( '#demoform')。getFormParam();
window.localstorage.setItem( 'demo'、json.stringify(data));
falseを返します。
});
});
})(jQuery)
HTMLコード:
<!doctype html>
<html lang = "zh">
<head>
<メタcharset = "utf-8">
<スクリプトsrc = "jquery-1.10.2.min.js"> </scrip>
<スクリプトsrc = "demo.js"> </script>
<title> document </title>
</head>
<body>
<form>
<p> <label> <span> name </span> <input> </label> </p>
<p> <label> <span> </span> <inupt> </label> </p>
<p> <label> <span>学生番号</span> <input> </label> </p>
<p> <label> <span>アドレス</span> <input> </label> </p>
<p> <label> <span>趣味</span> <input> </label> </p>
<p> <label> <span>その他</span> <textarea cols = "30" rows = "10"> </textarea> </label> </p>
<p> <入力タイプ= "submit" value = "submit"> </p>
</form>
</body>
</html>
このように、LocalStorageが実装されていることを示す簡単なデモ
2。SessionStorage
SessionStorageの使用法はLocalStorageの使用と同じですが、ブラウザがWebサイトを閉じるとSessionStorageがクリアされ、LocalStorageがブラウザに保存され、両方が必要に応じて一緒に使用されます。
3。ローカルデータベース
iOS/Android開発に精通している学生は、SQLiteデータベースに精通している必要があります
HTML5でのデータベースの操作は比較的単純で、主にOpendatabaseメソッドとトランザクションメソッドを含む
オブジェクトDBを使用して、OpenDataBaseによって作成されたオブジェクトを受信してデータベースにアクセスします
var db = opendatabase(databaseName、バージョン、説明、サイズ)
で
データベースネーム:データベース名
バージョン:データベースバージョンは無視できます
説明:データベースの説明
サイズ:データベースにスペースサイズが割り当てられました
トランザクションメソッドは、コールバック関数をパラメーターとして使用して、特定のメソッドを実行して関数内のデータベースにアクセスします。
db.transaction(function(tx)){
tx.executesql(sqlquery、[value1、value2 ..]、datahandler、errorhandler)
});
executesQLメソッドの4つのパラメーターは次のとおりです。
sqlquery:具体的に実行する必要があるSQLステートメント、|| select || update || deleteを作成します。
[value1、value2 ..]:SQLステートメントで使用されるすべてのパラメーターの配列。 executesQLメソッドでは、SQLステートメントで使用するパラメーターは最初に?に置き換えられ、次にこれらのパラメーターは順番に配列で構成され、2番目のパラメーターに配置されます。
DataHandler:成功したコールバック関数を実行します。
エラーハンドラー:コールバック関数が実行に失敗しました。