HTML5 ローカルストレージ localstorage、ローカルデータベース、sessionStorage の簡単な使用例

HTML5 ローカルストレージ localstorage、ローカルデータベース、sessionStorage の簡単な使用例_html5 チュートリアルスキル

PHP中文网

リリース： 2016-05-16 15:47:55

オリジナル

1624 人が閲覧しました

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(&#39;demo&#39;));
$.each(storageFile, function(i, val){
$(&#39;#demoForm&#39;).find(&#39;[name="&#39;+i+&#39;"]&#39;).val(val);
});</p> <p> $(&#39;#demoForm&#39;).find(&#39;[type="submit"]&#39;).on(&#39;click&#39;, function(){
var data = $(&#39;#demoForm&#39;).getFormParam();
window.localStorage.setItem(&#39;demo&#39;, 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. ローカルデータベース

IOS/Android 開発に精通している学生は、SQLite データベースに精通している必要があります

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) に注目してください。