HTML5のストレージ機能とWebの関連操作方法を解析する SQL_html5チュートリアルスキル-H5 チュートリアル-php.cn

>

<ボディ>

<スクリプト type="text/ javascript">

sessionStorage.hits = 番号(sessionStorage.hits) 1;

sessionStorage.hits = 1; }

>ヒット数を増やすにはページを更新してください。 p> <

>

ローカルストレージ
_Local Storage_ は、複数のウィンドウにまたがって保存されるように設計されており、現在のセッションで永続化されます。特に、Web アプリケーションでは、パフォーマンス上の理由から、ユーザーによって書かれたドキュメント全体やユーザーのメールボックスなど、数百万バイトのユーザーデータをクライアントに保存する必要がある場合があります。

Cookie はリクエストごとに送信されるため、この状況にはあまりうまく対処できません。

例

HTML5 では、時間制限なしでページのローカルストレージ領域にアクセスするために使用できる localStorage 属性が導入されました。このページを使用するときはいつでもローカルストレージを利用できます。

次のコードは、このページにアクセスするたびに、次回ウィンドウを開いたときでもアクセスできるローカルストレージ変数を設定します。

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<ボディ>
<スクリプト type="text/ javascript">
if( localStorage.hits){
localStorage.hits = 番号(localStorage.hits) 1;
localStorage.hits = 1; }
document.write("合計ヒット数:" localStorage.hits);
> <
>ヒット数を増やすにはページを更新してください。 p> <
>ウィンドウを閉じ、再度開いて結果を確認します。 p>
>
> 上記の概念は簡単に学べます - オンラインで練習してください。

Web ストレージを削除します

ローカルマシンに機密データを保存すると危険があり、セキュリティホールが残る可能性があります。

_セッション保存データ_は、セッション終了直後にブラウザによって削除されます。

ローカルストレージ設定をクリアするには、localStorage.remove('key') を呼び出す必要があります。この 'key' は、削除する値に対応するキーです。すべての設定をクリアしたい場合は、localStorage.clear() メソッドを呼び出す必要があります。
次のコードはローカルストレージを完全にクリアします:

XML/HTML コード

コンテンツをクリップボードにコピー

>
<html>
<ボディ>
<スクリプト type="text/ javascript">
localStorage.clear();
// ヒット数をリセットします。
if( localStorage.hits ){
localStorage.hits = 番号(localStorage.hits) 1;
}else{
localStorage.hits = 1;
}
document.write("Total Hits :" localStorage.hits );
スクリプト>
<p>ページを更新してもヒットカウンターは増加しません。p>
<p>ウィンドウを閉じて、再度開き、結果を確認します。 p>
ボディ>
html>

Web SQL データベース API
Web SQL データベース API は HTML5 規格の一部ではありませんが、SQL 操作を使用するゲストデータベースの API が組み込まれた独立した規格です。
核心メソッド
以下は、この教義で定義される 3 つの核心メソッドです。

openDatabase: このメソッドは、既存のデータベースまたは新しく作成されたデータベースを使用して、データオブジェクトオブジェクトを作成します。

SQL を実行
データベースを開始します
データベースが存在する場合、openDatabase メソッドはデータベースを開始し、存在しない場合はこのメソッドが作成します。
次の番号コードを使用してデータパッケージを作成および公開できます:

JavaScript コード

复制コンテンツ到剪贴板

db = openDatabase('mydb','1.0'、'テスト DB'、2 * 1024 * 1024);

上記のメソッドは次の 5 つのパラメータを受け入れます:

データベース名
バージョン番号
説明テキスト
データベースサイズ
作成コールバック
最後と5番目のパラメータである作成コールバックは、データベースの作成後に呼び出されます。ただし、この機能がなくても、ランタイムはデータベースと正しいバージョンを作成します。

クエリを実行する
クエリを実行するには、database.transaction() 関数を使用する必要があります。この関数は 1 つのパラメーターを受け取ります。これは、以下に示すように、クエリを実際に実行する役割を担う関数です。

JavaScript コードコンテンツをクリップボードにコピーします

var db = openDatabase('mydb', '1.0'、'テスト DB'、2 * 1024 * 1024); db.transaction(
(tx) { tx.executeSql(
); });
上記のクエリステートメントは、「mydb」データベースに LOGS というテーブルを作成します。

挿入操作

JavaScript コード
コンテンツをクリップボードにコピーします

var

db = openDatabase(

, '1.0'、'テスト DB'、2 * 1024 * 1024); db.transaction(関数 (tx) {
'ログが存在しない場合はテーブルを作成 (ID は一意、ログ)'); tx.executeSql(
); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'
});
JavaScript コードコンテンツをクリップボードにコピーします

var

, '1.0'、

'テスト DB'

、2 * 1024 * 1024); db.transaction(関数 (tx) { tx.executeSql('ログが存在しない場合はテーブルを作成 (ID は一意、ログ)'); tx.executeSql('INSERT INTO ログ
(id,log) VALUES (?, ?'), [e_id, e_log];
ここで、e_id と e_log は外部変数であり、executeSql は配列パラメータの各エントリを「?」にマップします。

読み取り操作
既存のレコードを読み取るには、次のようにコールバックを使用して結果をキャプチャできます:
JavaScript コードコンテンツをクリップボードにコピーします
1. var db = openDatabase('mydb', '1.0'、'テスト DB'、2 * 1024 * 1024); db.transaction(
2. 関数 (tx) { tx.executeSql(
3. 'ログが存在しない場合はテーブルを作成 (ID は一意、ログ)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'
4. ); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
5. }); db.transaction(関数
6. (tx) {
7. tx.executeSql('SELECT * FROM LOGS', [], 関数
8. (tx, results) { var len = results.rows.length, i; msg =
9. "
  見つかった行: " len "
  ";
10. document.querySelector('#status').innerHTML =
11. for (i = 0; i < len; i ){ アラート(results.rows.item(i).log);
12. } }、
13. null);
14. });
15. 最後の例最後に、この例を次のような完全な HTML5 ドキュメントに組み込み、Safari で実行してみましょう:
16. コンテンツをクリップボードにコピーします
この会議は次のような結果を生成します:

代制
代码如下:

ログメッセージが作成され、行が挿入されました。

見つかった行: 2

フーバー

ログメッセージ