HTML 5ローカルストレージとローカルデータベースインスタンスの詳細

ローカルストレージ
1.1ローカルストレージ由来の背景
HTML 4時代のCookieのサイズ、フォーマット、格納データフォーマットなどの制限により、Webアプリケーションはブラウザ側にユーザの情報の一部を格納したい場合はCookieを借りるしかない.しかし、Cookieのこれらの制限により、CookieはIDのような識別子などの簡単なデータしか記憶できないようになった.
次はCookieの制限です.
ほとんどのブラウザでは、最大4096バイトのCookieがサポートされています.
ブラウザはまた、サイトがユーザコンピュータに格納できるCookieの数を制限する.ほとんどのブラウザでは、サイトごとに20個のCookieしか保存できません.より多くのCookieを格納しようとすると、最も古いCookieは破棄されます.
一部のブラウザでは、すべてのサイトから受け入れられるCookieの総数を絶対的に制限し、通常は300個です.
Cookieのデフォルトは、Httpリクエストに従ってバックグラウンドサーバに送信されますが、すべてのリクエストがCookieを必要とするわけではありません.たとえば、js、css、ピクチャなどのリクエストにはCookieは必要ありません.
Cookieの一連の制限を解くために、HTML 5はJSの新しいAPIを通じて大量のデータをクライアントブラウザに直接保存することができ、複雑なローカルデータベースをサポートし、JSをより効率的にすることができる.
html 5は2種類のWebStorageをサポートしています.
永続的なローカルストレージ(localStorage)
セッション・レベルのローカル・ストレージ
1.2永続的なローカルストレージ:localStorage
最新のJSのAPIにはlocalStorageオブジェクトが追加されており,ユーザが永続的に格納するWeb側のデータを格納しやすい.また、Http要求に従ってバックグラウンドサーバにデータが送信ことはなく、Html 5の規格ではブラウザが少なくとも4 MBまでサポートすることが要求するため、格納データのサイズは基本的に考慮する必要はない.したがって、これはCookieの制限を完全に覆し、Webアプリケーションが複雑なユーザー痕跡データをローカルに格納するのに非常に便利な技術サポートを提供します.次にlocalStorageの一般的な方法について説明します.
localStorageは、ローカルストレージに関する操作を支援する4つの方法を提供します.
setItem(key,value)ローカルストレージデータを追加します.2つのパラメータは、とても簡単ではありません.
getItem(key)は、keyによって対応するValueを取得する.
removeItem(key)ローカルデータをkeyで削除します.
clear()データを空にします.
コードは次のとおりです.

    //  key-value     sessionStorage
    localStorage.setItem("demokey", "http://www.shiyanlou.com");
    //  key   value
    var dt = localStorage.getItem("demokey");
    alert(dt);
    //     key-value  。
    //localStorage.clear();
    alert(localStorage.length);

1.3セッション・レベルのローカル・ストレージ:セッション・ストレージ
HTML 5にJsオブジェクトが追加されました:sessionStorage;このオブジェクトを使用すると、ブラウザに格納されているセッションレベルのWebStorageを直接操作できます.セッションストアに格納されているデータは、まずKeyValue形式であり、ブラウザの現在のセッションに関連しており、セッションが終了すると、有効期限が設定されていないCookieと同様に自動的に消去されます.
sessionStorageは、ローカルストレージに関する操作を支援する4つの方法を提供します.
setItem(key,value)ローカルストレージデータを追加します.2つのパラメータは、とても簡単ではありません.
getItem(key)は、keyによって対応するValueを取得する.
removeItem(key)ローカルデータをkeyで削除します.
clear()データを空にします.
コードは次のとおりです.

    //  key-value     sessionStorage
    sessionStorage.setItem("demokey", "http://blog.itjeek.com");
    //  key   value
    var dt = sessionStorage.getItem("demokey");
    alert(dt);
    //     key-value  。
    //sessionStorage.clear();
    alert(sessionStorage.length);

1.4強力なローカルデータ
HTML 5は強力なlocalStorageとsessionStorageを提供していますが、どちらも単純なデータ構造を格納するデータしか提供できません.複雑なWebアプリケーションのデータにはどうしようもありません.HTML 5はブラウザ側のデータベースサポートを提供しており、JSのAPIに直接アクセスしてブラウザ側でローカルのデータベースを作成することができ、標準的なSQLのCRUD操作をサポートし、オフラインのWebアプリケーションが構造化されたデータをより便利に保存することができます.次に、ローカルデータに関するAPIと使い方を紹介します.
ローカル・データベースを操作する最も基本的な手順は、次のとおりです.
ステップ1:openDatabaseメソッド:データベースにアクセスするオブジェクトを作成します.
ステップ2:最初のステップで作成するデータベースアクセスオブジェクトを使用してtransactionメソッドを実行します.このメソッドでは、トランザクションを正常に開くイベント応答メソッドを設定し、イベント応答メソッドでSQLを実行できます.
ステップ3:executeSqlメソッドでクエリーを実行します.もちろん、クエリーはCRUDです.
次に、関連する方法のパラメータと使い方をそれぞれ紹介します.
1.4.1 OpenDatabaseメソッド
///demo:データベースが存在しない場合に作成されるデータベースを取得または作成します.

var dataBase = openDatabase(“student”, “1.0”, “   ”, 1024 * 1024, function () { }); 

OpenDatabaseメソッドは、既存のデータベースを開きます.データベースが存在しない場合は、データベースを作成することもできます.いくつかのパラメータの意味は次のとおりです.
データベース名.
データベースのバージョン番号は、現在は1.0でいいです.もちろん記入しなくてもいいです.
データベースの説明.
割り当てられたデータベースのサイズ(単位kb)を設定します.
コールバック関数(省略可能).
初回呼び出し時にデータベースを作成し、その後接続を確立します.
1.4.2 db.Transactionメソッド
コールバック関数を設定できます.この関数では、パラメータが開いているトランザクションのオブジェクトであることを受け入れることができます.その後、このオブジェクトを使用してSQLスクリプトを実行できます.
1.4.3 executeSqlメソッドクエリーの実行

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler) 

パラメータの説明:
qlQuery:具体的に実行する必要があるsql文は、create、select、update、deleteであってもよい.
[value1,value2..]:sql文で使用されるすべてのパラメータの配列.executeSqlメソッドでは、s>文で使用するパラメータを「?」代わりに、これらのパラメータ構成配列を2番目のパラメータに順次配置します.
DataHandler:正常に実行されたときに呼び出されたコールバック関数で、クエリー結果セットを得ることができます.
ErrorHandler:実行に失敗したときに呼び出されるコールバック関数;
1.5総合例

 
    
        function initDatabase() {
            var db = getCurrentDb();//      
            if(!db) {alert("        HTML5     ");return;}
            db.transaction(function (trans) {//      ，       
                //      Sql  
                trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
                }, function (trans, message) {//       alert(message);});
            }, function (trans, result) {
            }, function (trans, message) {
            });
        }
        $(function () {//                  
            initDatabase();
            $("#btnSave").click(function () {
                var txtName = $("#txtName").val();
                var txtTitle = $("#txtTitle").val();
                var txtWords = $("#txtWords").val();
                var db = getCurrentDb();
                //  sql  ，    
                db.transaction(function (trans) {
                    trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
                    }, function (ts, message) {
                        alert(message);
                    });
                });
                showAllTheData();
            });
        });
        function getCurrentDb() {
            //     ，           ：     ，  ，  ，  
            //             
            var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
            return db;
        }
        //                
        function showAllTheData() {
            $("#tblData").empty();
            var db = getCurrentDb();
            db.transaction(function (trans) {
                trans.executeSql("select * from Demo ", [], function (ts, data) {
                    if (data) {
                        for (var i = 0; i < data.rows.length; i++) {
                            appendDataToTable(data.rows.item(i));//       json  
                        }
                    }
                }, function (ts, message) {alert(message);var tst = message;});
            });
        }
        function appendDataToTable(data) {//          
            //uName,title,words
            var txtName = data.uName;
            var txtTitle = data.title;
            var words = data.words;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+txtName+"</td>";
            strHtml += "<td>" + txtTitle + "</td>";
            strHtml += "<td>" + words + "</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }
    

    
        

ユーザー名:
タイトル:
メッセージ: