HTML 5における記憶及びオフライン応用(一)

このシリーズはLyndaに由来する.Com.HTML5.Local.Storage.And.Offline.Applications.In.Depth、私は整理の仕事しかしていません.
まず知識点の説明をします.HTML 5は以下のいくつかの記憶方式を提供しています.

Local Storage;

Session Storage;

Web SQL Storage;

Indexed database(IndexedDB);

最初の2つ:

はウェブストレージまたはDOMストレージである.

は、以前のクッキー記憶方式を置き換えるように設計されている.

Local Storageは持続可能であり、Session Storageは持続不可能である.

どちらもStorageインタフェースを使用します.

IE 8、Firefox 3.6、Safari 4、Chrome 4...すべて支持します;

Web SQL Storage:

SQLite 3エンジンを使用すると、このメリットが多くなります.

IE/Firefoxはしばらくサポート計画がありません(カップ、なぜ主流の都木はサポートつまみがあります);

IndexedDB:

KeyValue形式、非関係型データ;

はFirefox 4でサポートされていますが、残りのブラウザのサポートにはまだ時間があります...

OMG、上がこんなに多いのを見て頭が混乱しているのではないでしょうか...确かに无言ですね.标准统一はまだ时间があるようですね.そして、Chromeが今一番支持しているように见えますね.の
では、前の理論知識を説明しました.次に、いくつかの例を始めましょう.
例で使用するjsライブラリファイル:

/*
    bwH5LS.js by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
*/

var _bwH5LS_version = "1.0.2";

// useful for finding elements
var element = function(id) { return document.getElementById(id); }
var errorMessage = undefined;

function getOpenDatabase() {
    try {
        if( !! window.openDatabase ) return window.openDatabase;
        else return undefined;
    } catch(e) {
        return undefined;
    }
}

function getLocalStorage() {
    try {
        if( !! window.localStorage ) return window.localStorage;
        else return undefined;
    } catch(e) {
        return undefined;
    }
}

function getSessionStorage() {
    try {
        if( !! window.sessionStorage ) return window.sessionStorage;
        else return undefined;
    } catch(e) {
        return undefined;
    }
}

function dispError( message ) {
    errorMessage = '<p class="error">' + message + '</p>';
    haveError = true;
}


function bwTable( wrap ) {
    this.wrap = ( wrap == undefined ) ? true : wrap;    // default to true
    this.rows = new Array();
    this.header = [];

    this.setHeader = function( row ) {
        this.header = row;
    }

    this.addRow = function( row ) {
        this.rows.push(row);
    }

    this.getRow = function ( index ) {
        return this.rows[index];
    }

    this.countRows = function () {
        return this.rows.length;
    }

    this.getTableHTML = function () {
        var a = '';
        if(this.wrap) a += '<table class="bwTable">
';
        a += this.getHeaderHTML();
        for(var row in this.rows) {
            a += this.getRowHTML(this.rows[row]);
        }
        if(this.wrap) a += '</table>
';
        return a;
    }

    this.getHeaderHTML = function () {
        if( this.header.length == 0 ) return '';
        var a = '<tr>';
        for( var cell in this.header ) {
            a += '<th>' + this.header[cell] + '</th>';
        }
        a += '</tr>
';
        return a;
    }

    this.getRowHTML = function (row ) {
        var a = '<tr>';
        for( var cell in row ) {
            var v= row[cell];
            if(v == null) v = '<span class="red">NULL</span>';
            a += '<td>' + v + '</td>';
        }
        a += '</tr>
';
        return a;
    }

    this.writeTable = function () {
        document.write(this.getTableHTML());
    }

}

例で使用するcssファイル:

/*
    main.css by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 

    v 1.0.1 - bw 2011-04-19
*/

/* -------- color guide (From Explore California) ----------
#3c6b92 : main blue
#6acce2 : light blue
#2c566a : teal accent
#193742 : dark blue
#e1d8b9 : sand accent
#cb7d20 : orange accent
#51341a : brown
#995522 : dark orange (used for links or high contrast accents)
#cb202a : red accent (this color does not encode well, use only for small accents)
#896287 : purple
*/

/* reasonable reset */
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, table, tr, td,
p, blockquote, address, time, span, em, strong, img, ol, ul, li, dl, dt, figure, canvas, video {
    margin: 0;
    padding: 0;
    border: 0;
}

body  {
    font-family: Georgia, serif;    /* default page font */
    background-color: #3c6b92;
}

.red {
    color: #cb202a;
}

p.message, p.error {
    font: normal 1em Helvetica, Arial, sans-serif;
    padding: 0 3px;
}

p.message {
    border: 1px solid #995522;
    background-color: #e1d8b9;
    color: black;
}

p.error {
    border: 1px solid #193742;
    background-color: #cb202a;
    color: white;
}

#content {
    width: 85%;
    margin: 20px auto;
    padding: 5px;
    background-color: white;
    min-height: 300px;
}

#content h1, #content h2 {
    font: normal 1.4em Helvetica, Arial, sans-serif;
    color: #3c6b92;
}

#content p, h1, h2, h3 {
    margin-bottom: .5em;
}

#content h1 {
    border-bottom: solid 2px #3c6b92;
}

#content h2.error {
    color: #cb7d20;
}

/* bwTable */

.bwTable {
    background: #c3cebc;
    margin-bottom: .5em;
    border: 1px solid #995522;
    border-collapse: collapse;
}

.bwTable tr, .bwTable td, .bwTable th {
    font: normal 1em Helvetica, Arial, sans-serif;
    text-align: left;
    border: solid 1px #995522;
    padding: 1px 3px;
}

.bwTable tr:nth-child(odd) {
    background: #e1d8b9;
}

.bwTable th {
    background: #193742;
    color: #c3cebc;
    border: solid 1px #51341a;
}

.bwTable td {
    min-width: 100px;
}

/* form */

#form {
    margin-bottom: 10px;
    border-bottom: 2px solid #3c6b92;
}

#form input[type=text] {
    width: 300px;
}

#form td.button, #form td.label {
    text-align: right;
}

#form td.label {
    padding-right: 3px;
}

最初の例では、Local Storageストレージを使用します.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- 
    template.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        localStorage example
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css">
    <script language="javascript" src="../Javascript/bwH5LS.js"></script>
    <script language="javascript">
        var t = new bwTable();
        var db = getLocalStorage() || dispError('Local Storage not supported.');
		//       
        function getLocalStorage() {
            try {
                if( !! window.localStorage ) return window.localStorage;
            } catch(e) {
				//                
                return undefined;
            }
        }
        
        function dispResults() {
            if(errorMessage) {
                element('results').innerHTML = errorMessage;
                return;
            }
            
			//     
            db.setItem('traveler', 'Bill');
            db.setItem('destination', 'Ventura');
            db.setItem('transportation', 'Airplane');
			//     
			//db.removeItem('traveler');
			//       
			//db.clear();

            var t = new bwTable();
			//            
            t.addRow( ['traveler', db.getItem('traveler')] );
            t.addRow( ['destination', db.getItem('destination')] );
            t.addRow( ['transportation', db.getItem('transportation')] );
			//     HTML  
            element('results').innerHTML = t.getTableHTML();
        }

        function dbGo() {
            if(errorMessage) return;
            dispResults();
        }

        function initDisp() {
            dispResults();
        }

        window.onload = function() {
            initDisp();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        localStorage example
    </h1>
    
    <div id="form">
        <form id="travelForm">
            <table class="form">
                <tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
                <tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
                <tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
                <tr><td colspan="2" class="button"> <input id="formSubmit" type="button" value="Go" onClick="javascript:dbGo()" /> </td></tr>
            </table>
        <input id="inputAction" type="hidden" name="action" value="add" />
        <input id="inputKey" type="hidden" name="key" value="0" />
        </form>
    </div>
    
    <div id="results">
    <!-- results show here -->
    </div>
    
</div>
</body>
</html>

2つ目の例では、1つ目の例に基づいて、テーブル内のコントロール値からコンテンツを取得します.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- 
    template.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        localStorage example
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css">
    <script language="javascript" src="../Javascript/bwH5LS.js"></script>
    <script language="javascript">
        var t = new bwTable();
        var db = getLocalStorage() || dispError('Local Storage not supported.');

        function getLocalStorage() {
            try {
                if( !! window.localStorage ) return window.localStorage;
            } catch(e) {
                return undefined;
            }
        }
        
        function dispResults() {
            if(errorMessage) {
                element('results').innerHTML = errorMessage;
                return;
            }
            
            var t = new bwTable();
            t.addRow( ['traveler', db.getItem('traveler')] );
            t.addRow( ['destination', db.getItem('destination')] );
            t.addRow( ['transportation', db.getItem('transportation')] );
            element('results').innerHTML = t.getTableHTML();
        }

        function dbGo() {
            if(errorMessage) return;
            var f = element('travelForm');
            db.setItem('traveler', f.elements['traveler'].value);
            db.setItem('destination', f.elements['destination'].value);
            db.setItem('transportation', f.elements['transportation'].value);
            dispResults();
        }

        function dbClear() {
            if(errorMessage) return;
            db.clear();
            dispResults();
        }
        
        function initDisp() {
            dispResults();
        }

        window.onload = function() {
            initDisp();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        localStorage example
    </h1>
    
    <div id="form">
        <form id="travelForm">
            <table class="form">
                <tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
                <tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
                <tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
                <tr><td colspan="2" class="button">
                    <input id="formSubmit" type="button" value="Clear" onClick="javascript:dbClear()" />
                    <input id="formSubmit" type="button" value="Go" onClick="javascript:dbGo()" />
                </td></tr>
            </table>
        <input id="inputAction" type="hidden" name="action" value="add" />
        <input id="inputKey" type="hidden" name="key" value="0" />
        </form>
    </div>
    
    <div id="results">
    <!-- results show here -->
    </div>
    
</div>
</body>
</html>

この例では、3つのテーブルの値は初期化されていませんが、ブラウザが閉じてから再開しても、閉じる前に保存した値が表示されます.また、異なるブラウザで保存されている値が異なることをテストすることができます.の
次の例では、元のLocal StorageをSession Storageに変更します.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- 
    template.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        sessionStorage example
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css">
    <script language="javascript" src="../Javascript/bwH5LS.js"></script>
    <script language="javascript">
        var t = new bwTable();
        var db = getSessionStorage() || dispError('Session Storage not supported.');

        function getSessionStorage() {
            try {
				//     sessionStorage
                if( !! window.sessionStorage ) return window.sessionStorage;
            } catch(e) {
                return undefined;
            }
        }
        
        function dispResults() {
            if(errorMessage) {
                element('results').innerHTML = errorMessage;
                return;
            }
            
            var t = new bwTable();
            t.addRow( ['traveler', db.getItem('traveler')] );
            t.addRow( ['destination', db.getItem('destination')] );
            t.addRow( ['transportation', db.getItem('transportation')] );
            element('results').innerHTML = t.getTableHTML();
        }

        function dbGo() {
            if(errorMessage) return;
            var f = element('travelForm');
            db.setItem('traveler', f.elements['traveler'].value);
            db.setItem('destination', f.elements['destination'].value);
            db.setItem('transportation', f.elements['transportation'].value);
            dispResults();
        }

        function dbClear() {
            if(errorMessage) return;
            db.clear();
            dispResults();
        }
        
        function initDisp() {
            dispResults();
        }

        window.onload = function() {
            initDisp();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        sessionStorage example
    </h1>
    
    <div id="form">
        <form id="travelForm">
            <table class="form">
                <tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
                <tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
                <tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
                <tr><td colspan="2" class="button">
                    <input id="formSubmit" type="button" value="Clear" onClick="javascript:dbClear()" />
                    <input id="formSubmit" type="button" value="Go" onClick="javascript:dbGo()" />
                </td></tr>
            </table>
        <input id="inputAction" type="hidden" name="action" value="add" />
        <input id="inputKey" type="hidden" name="key" value="0" />
        </form>
    </div>
    
    <div id="results">
    <!-- results show here -->
    </div>
    
</div>
</body>
</html>

その結果、ブラウザのラベルページが閉じている限り、データは存在しないことに気づきました.これにより、Local StorageとSession Storageの違いが明らかになるでしょう.のOK、今日はここまでで、SQL StorageとIndexedDBについてお話しします.