深切解析HTML5中的IndexedDB索引数据库,前端的数据库

结论

随着应用程序的急需的增高,你会发现在客户端高效存储大量的多少的优势。IndexedDB是足以在浏览器中央直机关接使用且支持异步事务的文书档案数据库达成。就算浏览器的支撑只怕还是无法保全,但在适合的境况下,集成IndexedDB的Web应用程序具有强有力的客户端数据的访问能力。

在大部状态下,全数针对IndexedDB编写的代码是后天基于请求和异步的。官方正规有同步API,可是那种IndexedDB只适合web
worker的光景文中使用。那篇文章宣布时,还尚无浏览器达成的共同格式的IndexedDB
API。

必然要保管代码在其他函数域外对厂商特定的indexedDB, IDBTransaction, and
IDBKeyRange实例进行了规范化且使用了残忍格局。那允许你防止浏览器错误,当在strict
mode下解析脚本时,它不会容许你对那个对象重新赋值。

您无法不确认保障只传递正整数的版本号给数据库。传递到版本号的小数值会四舍5入。因而,假设您的数据库如今版本一,您打算访问1.贰版本,upgrade-needed事件不会触发,因为版本号最终评估是同1的。

旋即施行函数表明式(IIFE)有时叫做分化的名字。有时能够见到这么的代码协会章程,它叫做self-executing
anonymous functions(自推行匿名函数)或self-invoked anonymous
functions(自调用匿名函数)。为更为表达那一个名称相关的来意和意义,请阅读Ben
Alman的作品Immediately Invoked Function Expression (IIFE) 。

Listing 1: Implementing the getAll function

JavaScript

getAll: function (callback) { db.open(function () { var store =
db.getObjectStore(), cursor = store.openCursor(), data = [];
cursor.onsuccess = function (e) { var result = e.target.result; if
(result && result !== null) { data.push(result.value);
result.continue(); } else { callback(data); } }; }); },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
getAll: function (callback) {
 
    db.open(function () {
 
        var
            store = db.getObjectStore(),
            cursor = store.openCursor(),
            data = [];
 
        cursor.onsuccess = function (e) {
 
            var result = e.target.result;
 
            if (result &&
                result !== null) {
 
                data.push(result.value);
                result.continue();
 
            } else {
 
                callback(data);
            }
        };
 
    });
},

Listing 2: Full source for database-specific code
(index.db.js)

JavaScript

// index.db.js ; window.indexedDB = window.indexedDB ||
window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange ||
window.msIDBKeyRange; (function(window){ ‘use strict’; var db = {
version: 1, // important: only use whole numbers! objectStoreName:
‘tasks’, instance: {}, upgrade: function (e) { var _db =
e.target.result, names = _db.objectStoreNames, name =
db.objectStoreName; if (!names.contains(name)) { _db.createObjectStore(
name, { keyPath: ‘id’, autoIncrement: true }); } }, errorHandler:
function (error) { window.alert(‘error: ‘ + error.target.code);
debugger; }, open: function (callback) { var request =
window.indexedDB.open( db.objectStoreName, db.version); request.onerror
= db.errorHandler; request.onupgradeneeded = db.upgrade;
request.onsuccess = function (e) { db.instance = request.result;
db.instance.onerror = db.errorHandler; callback(); }; }, getObjectStore:
function (mode) { var txn, store; mode = mode || ‘readonly’; txn =
db.instance.transaction( [db.objectStoreName], mode); store =
txn.objectStore( db.objectStoreName); return store; }, save: function
(data, callback) { db.open(function () { var store, request, mode =
‘readwrite’; store = db.getObjectStore(mode), request = data.id ?
store.put(data) : store.add(data); request.onsuccess = callback; }); },
getAll: function (callback) { db.open(function () { var store =
db.getObjectStore(), cursor = store.openCursor(), data = [];
cursor.onsuccess = function (e) { var result = e.target.result; if
(result && result !== null) { data.push(result.value);
result.continue(); } else { callback(data); } }; }); }, get: function
(id, callback) { id = parseInt(id); db.open(function () { var store =
db.getObjectStore(), request = store.get(id); request.onsuccess =
function (e){ callback(e.target.result); }; }); }, ‘delete’: function
(id, callback) { id = parseInt(id); db.open(function () { var mode =
‘readwrite’, store, request; store = db.getObjectStore(mode); request =
store.delete(id); request.onsuccess = callback; }); }, deleteAll:
function (callback) { db.open(function () { var mode, store, request;
mode = ‘readwrite’; store = db.getObjectStore(mode); request =
store.clear(); request.onsuccess = callback; }); } }; window.app =
window.app || {}; window.app.db = db; }(window));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
// index.db.js
 
;
 
window.indexedDB = window.indexedDB ||
                   window.mozIndexedDB ||
                   window.webkitIndexedDB ||
                   window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction ||
                   window.webkitIDBTransaction ||
                   window.msIDBTransaction;
 
window.IDBKeyRange = window.IDBKeyRange ||
                   window.webkitIDBKeyRange ||
                   window.msIDBKeyRange;
 
(function(window){
 
    ‘use strict’;
 
    var db = {
 
        version: 1, // important: only use whole numbers!
 
        objectStoreName: ‘tasks’,
 
        instance: {},
 
        upgrade: function (e) {
 
            var
                _db = e.target.result,
                names = _db.objectStoreNames,
                name = db.objectStoreName;
 
            if (!names.contains(name)) {
 
                _db.createObjectStore(
                    name,
                    {
                        keyPath: ‘id’,
                        autoIncrement: true
                    });
            }
        },
 
        errorHandler: function (error) {
            window.alert(‘error: ‘ + error.target.code);
            debugger;
        },
 
        open: function (callback) {
 
            var request = window.indexedDB.open(
                db.objectStoreName, db.version);
 
            request.onerror = db.errorHandler;
 
            request.onupgradeneeded = db.upgrade;
 
            request.onsuccess = function (e) {
 
                db.instance = request.result;
 
                db.instance.onerror =
                    db.errorHandler;
 
                callback();
            };
        },
 
        getObjectStore: function (mode) {
 
            var txn, store;
 
            mode = mode || ‘readonly’;
 
            txn = db.instance.transaction(
                [db.objectStoreName], mode);
 
            store = txn.objectStore(
                db.objectStoreName);
 
            return store;
        },
 
        save: function (data, callback) {
 
            db.open(function () {
 
                var store, request,
                    mode = ‘readwrite’;
 
                store = db.getObjectStore(mode),
 
                request = data.id ?
                    store.put(data) :
                    store.add(data);
 
                request.onsuccess = callback;
            });
        },
 
        getAll: function (callback) {
 
            db.open(function () {
 
                var
                    store = db.getObjectStore(),
                    cursor = store.openCursor(),
                    data = [];
 
                cursor.onsuccess = function (e) {
 
                    var result = e.target.result;
 
                    if (result &&
                        result !== null) {
 
                        data.push(result.value);
                        result.continue();
 
                    } else {
 
                        callback(data);
                    }
                };
 
            });
        },
 
        get: function (id, callback) {
 
            id = parseInt(id);
 
            db.open(function () {
 
                var
                    store = db.getObjectStore(),
                    request = store.get(id);
 
                request.onsuccess = function (e){
                    callback(e.target.result);
                };
            });
        },
 
        ‘delete’: function (id, callback) {
 
            id = parseInt(id);
 
            db.open(function () {
 
                var
                    mode = ‘readwrite’,
                    store, request;
 
                store = db.getObjectStore(mode);
 
                request = store.delete(id);
 
                request.onsuccess = callback;
            });
        },
 
        deleteAll: function (callback) {
 
            db.open(function () {
 
                var mode, store, request;
 
                mode = ‘readwrite’;
                store = db.getObjectStore(mode);
                request = store.clear();
 
                request.onsuccess = callback;
            });
 
        }
    };
 
    window.app = window.app || {};
    window.app.db = db;
 
}(window));

Listing 3: Full source for user interface-specific code
(index.ui.js)

JavaScript

// index.ui.js ; (function ($, Modernizr, app) { ‘use strict’;
$(function(){ if(!Modernizr.indexeddb){
$(‘#unsupported-message’).show(); $(‘#ui-container’).hide(); return; }
var $deleteAllBtn = $(‘#delete-all-btn’), $titleText =
$(‘#title-text’), $notesText = $(‘#notes-text’), $idHidden =
$(‘#id-hidden’), $clearButton = $(‘#clear-button’), $saveButton =
$(‘#save-button’), $listContainer = $(‘#list-container’),
$noteTemplate = $(‘#note-template’), $emptyNote = $(‘#empty-note’);
var addNoTasksMessage = function(){ $listContainer.append(
$emptyNote.html()); }; var bindData = function (data) {
$listContainer.html(”); if(data.length === 0){ addNoTasksMessage();
return; } data.forEach(function (note) { var m = $noteTemplate.html(); m
= m.replace(/{ID}/g, note.id); m = m.replace(/{TITLE}/g, note.title);
$listContainer.append(m); }); }; var clearUI = function(){
$titleText.val(”).focus(); $notesText.val(”); $idHidden.val(”); }; //
select individual item $listContainer.on(‘click’, ‘a[data-id]’,
function (e) { var id, current; e.preventDefault(); current =
e.currentTarget; id = $(current).attr(‘data-id’); app.db.get(id,
function (note) { $titleText.val(note.title); $notesText.val(note.text);
$idHidden.val(note.id); }); return false; }); // delete item
$listContainer.on(‘click’, ‘i[data-id]’, function (e) { var id,
current; e.preventDefault(); current = e.currentTarget; id =
$(current).attr(‘data-id’); app.db.delete(id, function(){
app.db.getAll(bindData); clearUI(); }); return false; });
$clearButton.click(function(e){ e.preventDefault(); clearUI(); return
false; }); $saveButton.click(function (e) { var title =
$titleText.val(); if (title.length === 0) { return; } var note = {
title: title, text: $notesText.val() }; var id = $idHidden.val(); if(id
!== ”){ note.id = parseInt(id); } app.db.save(note, function(){
app.db.getAll(bindData); clearUI(); }); }); $deleteAllBtn.click(function
(e) { e.preventDefault(); app.db.deleteAll(function () {
$listContainer.html(”); addNoTasksMessage(); clearUI(); }); return
false; }); app.db.errorHandler = function (e) { window.alert(‘error: ‘ +
e.target.code); debugger; }; app.db.getAll(bindData); }); }(jQuery,
Modernizr, window.app));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
// index.ui.js
 
;
 
(function ($, Modernizr, app) {
 
    ‘use strict’;
 
    $(function(){
 
        if(!Modernizr.indexeddb){
            $(‘#unsupported-message’).show();
            $(‘#ui-container’).hide();
            return;
        }
 
        var
          $deleteAllBtn = $(‘#delete-all-btn’),
          $titleText = $(‘#title-text’),
          $notesText = $(‘#notes-text’),
          $idHidden = $(‘#id-hidden’),
          $clearButton = $(‘#clear-button’),
          $saveButton = $(‘#save-button’),
          $listContainer = $(‘#list-container’),
          $noteTemplate = $(‘#note-template’),
          $emptyNote = $(‘#empty-note’);
 
        var addNoTasksMessage = function(){
            $listContainer.append(
                $emptyNote.html());
        };
 
        var bindData = function (data) {
 
            $listContainer.html(”);
 
            if(data.length === 0){
                addNoTasksMessage();
                return;
            }
 
            data.forEach(function (note) {
              var m = $noteTemplate.html();
              m = m.replace(/{ID}/g, note.id);
              m = m.replace(/{TITLE}/g, note.title);
              $listContainer.append(m);
            });
        };
 
        var clearUI = function(){
            $titleText.val(”).focus();
            $notesText.val(”);
            $idHidden.val(”);
        };
 
        // select individual item
        $listContainer.on(‘click’, ‘a[data-id]’,
 
            function (e) {
 
                var id, current;
 
                e.preventDefault();
 
                current = e.currentTarget;
                id = $(current).attr(‘data-id’);
 
                app.db.get(id, function (note) {
                    $titleText.val(note.title);
                    $notesText.val(note.text);
                    $idHidden.val(note.id);
                });
 
                return false;
            });
 
        // delete item
        $listContainer.on(‘click’, ‘i[data-id]’,
 
            function (e) {
 
                var id, current;
 
                e.preventDefault();
 
                current = e.currentTarget;
                id = $(current).attr(‘data-id’);
 
                app.db.delete(id, function(){
                    app.db.getAll(bindData);
                    clearUI();
                });
 
                return false;
        });
 
        $clearButton.click(function(e){
            e.preventDefault();
            clearUI();
            return false;
        });
 
        $saveButton.click(function (e) {
 
            var title = $titleText.val();
 
            if (title.length === 0) {
                return;
            }
 
            var note = {
                title: title,
                text: $notesText.val()
            };
 
            var id = $idHidden.val();
 
            if(id !== ”){
                note.id = parseInt(id);
            }
 
            app.db.save(note, function(){
                app.db.getAll(bindData);
                clearUI();
            });
        });
 
        $deleteAllBtn.click(function (e) {
 
            e.preventDefault();
 
            app.db.deleteAll(function () {
                $listContainer.html(”);
                addNoTasksMessage();
                clearUI();
            });
 
            return false;
        });
 
        app.db.errorHandler = function (e) {
            window.alert(‘error: ‘ + e.target.code);
            debugger;
        };
 
        app.db.getAll(bindData);
 
    });
 
}(jQuery, Modernizr, window.app));

Listing 3: Full HTML source (index.html)

JavaScript

<!doctype html> <html lang=”en-US”> <head> <meta
charset=”utf-8″> <meta http-equiv=”X-UA-Compatible”
content=”IE=edge”> <title>Introduction to
IndexedDB</title> <meta name=”description”
content=”Introduction to IndexedDB”> <meta name=”viewport”
content=”width=device-width, initial-scale=1″> <link
rel=”stylesheet”
href=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/css/font-awesome.min.css” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/FontAwesome.otf” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.eot” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.svg” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.ttf” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.woff” > <style>
h1 { text-align: center; color:#999; } ul li { font-size: 1.35em;
margin-top: 1em; margin-bottom: 1em; } ul li.small { font-style: italic;
} footer { margin-top: 25px; border-top: 1px solid #eee; padding-top:
25px; } i[data-id] { cursor: pointer; color: #eee; }
i[data-id]:hover { color: #c75a6d; } .push-down { margin-top: 25px; }
#save-button { margin-left: 10px; } </style> <script
src=”//cdnjs.cloudflare.com/ajax/libs/modernizr%20/2.8.2/modernizr.min.js”
></script> </head> <body class=”container”>
<h1>Tasks</h1> <div id=”unsupported-message” class=”alert
alert-warning” style=”display:none;”> <b>Aww snap!</b>
Your browser does not support indexedDB. </div> <div
id=”ui-container” class=”row”> <div class=”col-sm-3″> <a
href=”#” id=”delete-all-btn” class=”btn-xs”> <i class=”fa
fa-trash-o”></i> Delete All</a> <hr/> <ul
id=”list-container” class=”list-unstyled”></ul> </div>
<div class=”col-sm-8 push-down”> <input type=”hidden”
id=”id-hidden” /> <input id=”title-text” type=”text”
class=”form-control” tabindex=”1″ placeholder=”title” autofocus
/><br /> <textarea id=”notes-text” class=”form-control”
tabindex=”2″ placeholder=”text”></textarea> <div
class=”pull-right push-down”> <a href=”#” id=”clear-button”
tabindex=”4″>Clear</a> <button id=”save-button” tabindex=”3″
class=”btn btn-default btn-primary”> <i class=”fa
fa-save”></i> Save</button> </div> </div>
</div> <footer class=”small text-muted text-center”>by <a
href=”” target=”_blank”>Craig
Shoemaker</a> <a href=””
target=”_blank”> <i class=”fa fa-twitter”></i></a>
</footer> <script id=”note-template” type=”text/template”>
<li> <i data-id=”{ID}” class=”fa fa-minus-circle”></i>
<a href=”#” data-id=”{ID}”>{TITLE}</a> </li>
</script> <script id=”empty-note” type=”text/template”>
<li class=”text-muted small”>No tasks</li> </script>
<script src=”//ajax.googleapis.com/ajax/libs
/jquery/1.11.1/jquery.min.js”></script> <script
src=”index.db.js” type=”text/javascript”></script> <script
src=”index.ui.js” type=”text/javascript”></script>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Introduction to IndexedDB</title>
        <meta name="description"
              content="Introduction to IndexedDB">
        <meta name="viewport"
              content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
              href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/css/font-awesome.min.css" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/FontAwesome.otf" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.eot" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.svg" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.ttf" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.woff" >
        <style>
            h1 {
                text-align: center;
                color:#999;
            }
 
            ul li {
                font-size: 1.35em;
                margin-top: 1em;
                margin-bottom: 1em;
            }
 
            ul li.small {
                font-style: italic;
            }
 
            footer {
                margin-top: 25px;
                border-top: 1px solid #eee;
                padding-top: 25px;
            }
 
            i[data-id] {
                cursor: pointer;
                color: #eee;
            }
 
            i[data-id]:hover {
                color: #c75a6d;
            }
 
            .push-down {
                margin-top: 25px;
            }
 
            #save-button {
                margin-left: 10px;
            }
        </style>
        <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr
/2.8.2/modernizr.min.js" ></script>
    </head>
    <body class="container">
        <h1>Tasks</h1>
        <div id="unsupported-message"
             class="alert alert-warning"
             style="display:none;">
            <b>Aww snap!</b> Your browser does not support indexedDB.
        </div>
        <div id="ui-container" class="row">
            <div class="col-sm-3">
 
                <a href="#" id="delete-all-btn" class="btn-xs">
                    <i class="fa fa-trash-o"></i> Delete All</a>
 
                <hr/>
 
                <ul id="list-container" class="list-unstyled"></ul>
 
            </div>
            <div class="col-sm-8 push-down">
 
                <input type="hidden" id="id-hidden" />
 
                <input
                       id="title-text"
                       type="text"
                       class="form-control"
                       tabindex="1"
                       placeholder="title"
                       autofocus /><br />
 
                <textarea
                          id="notes-text"
                          class="form-control"
                          tabindex="2"
                          placeholder="text"></textarea>
 
                <div class="pull-right push-down">
 
                    <a href="#" id="clear-button" tabindex="4">Clear</a>
 
                    <button id="save-button"
                            tabindex="3"
                            class="btn btn-default btn-primary">
                                <i class="fa fa-save"></i> Save</button>
                </div>
            </div>
        </div>
        <footer class="small text-muted text-center">by
            <a href="http://craigshoemaker.net" target="_blank">Craig Shoemaker</a>
            <a href="http://twitter.com/craigshoemaker" target="_blank">
                <i class="fa fa-twitter"></i></a>
        </footer>
        <script id="note-template" type="text/template">
            <li>
                <i data-id="{ID}" class="fa fa-minus-circle"></i>
                <a href="#" data-id="{ID}">{TITLE}</a>
            </li>
        </script>
        <script id="empty-note" type="text/template">
            <li class="text-muted small">No tasks</li>
        </script>
        <script src="//ajax.googleapis.com/ajax/libs
/jquery/1.11.1/jquery.min.js"></script>
        <script src="index.db.js" type="text/javascript"></script>
        <script src="index.ui.js" type="text/javascript"></script>
    </body>
</html>

赞 1 收藏
评论

深深解析HTML5中的IndexedDB索引数据库,html5indexeddb

那篇小说首要介绍了深切解析HTML5中的IndexedDB索引数据库,包罗事务锁等基本效用的有关应用示例,须求的仇敌能够参见下

介绍 IndexedDB是HTML5 WEB数据库,允许HTML5WEB应用在用户浏览器端存款和储蓄数据。对于利用来说IndexedDB拾一分强大、有用,能够在客户端的chrome,IE,Firefox等WEB浏览器中储存大批量多少,上边轻松介绍一下IndexedDB的基本概念。
 
什么是IndexedDB IndexedDB,HTML5新的数目存款和储蓄,能够在客户端存款和储蓄、操作数据,能够使应用加载地越来越快,更加好地响应。它区别于关系型数据库,拥有数据表、记录。它影响着大家安排和开创应用程序的章程。IndexedDB
成立有数据类型和总结的JavaScript持久对象的object,每一个object能够有目录,使其立竿见影地查询和遍历整个集合。本文为您提供了怎么在Web应用程序中运用IndexedDB的真正事例。
 
开始 咱俩须要在进行前包涵下前面置代码

JavaScript
Code复制内容到剪贴板

  1. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
      
  2.     
  3. //prefixes of window.IDB objects   
  4. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
      
  5. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
      
  6.     
  7. if (!indexedDB) {   
  8. alert(“Your browser doesn’t support a stable version of IndexedDB.”)
      
  9. }  

 
打开IndexedDB 在创建数据库此前,大家率先须要为数据库创立数量,若是大家有如下的用户消息:

JavaScript
Code复制内容到剪贴板

  1. var userData = [   
  2. { id: “1”, name: “Tapas”, age: 33, email: “[email protected]” },
      
  3. { id: “2”, name: “Bidulata”, age: 55, email: “[email protected]” }
      
  4. ];  

当今我们需求用open()方法展开大家的数据库:

JavaScript
Code复制内容到剪贴板

  1. var db;   
  2. var request = indexedDB.open(“databaseName”, 1);   
  3.     
  4. request.onerror = function(e) {   
  5. console.log(“error: “, e);   
  6. };   
  7.     
  8. request.onsuccess = function(e) {   
  9. db = request.result;   
  10. console.log(“success: “+ db);   
  11. };   
  12. request.onupgradeneeded = function(e) {   
  13.     
  14. }  

如上所示,我们曾经展开了名叫”databaseName”,内定版本号的数据库,open()方法有三个参数:
1.率先个参数是数据库名称,它会质量评定名称叫”databaseName”的数据库是或不是早已存在,假使存在则展开它,不然成立新的数据库。
2.次之个参数是数据库的本子,用于用户更新数据库结构。
 
onSuccess处理 发生成功事件时“onSuccess”被触发,假如拥有成功的乞请都在此处理,大家能够经过赋值给db变量保存请求的结果供之后使用。
 
onerror的处理程序 发出错误事件时“onerror”被触发,如果展开数据库的长河中告负。
 
Onupgradeneeded处理程序 若果你想翻新数据库(创设,删除或修改数据库),那么你必须兑现onupgradeneeded处理程序,使你能够在数据库中做任何改造。
在“onupgradeneeded”处理程序中是能够转移数据库的结构的绝无仅有地点。
 
开创和拉长数据到表:
IndexedDB使用对象存款和储蓄来存款和储蓄数据,而不是因此表。
每当一个值存款和储蓄在对象存款和储蓄中,它与三个键相关联。
它同意大家创立的别的对象存款和储蓄索引。
索引允许大家访问存款和储蓄在目的存款和储蓄中的值。
上面包车型客车代码显示了怎么着创立对象存款和储蓄并插入预先准备好的数目:

JavaScript
Code复制内容到剪贴板

  1. request.onupgradeneeded = function(event) {   
  2. var objectStore = event.target.result.createObjectStore(“users”, {keyPath: “id”});
      
  3. for (var i in userData) {   
  4. objectStore.add(userData[i]);    
  5. }   
  6. }  

大家运用createObjectStore()方法创造一个对象存款和储蓄。 此方法接受七个参数:

  • 储存的称呼和参数对象。
    在此地,大家有3个名称为”users”的对象存款和储蓄,并定义了keyPath,那是目的唯壹性的品质。
    在那里,大家利用“id”作为keyPath,那么些值在指标存款和储蓄中是唯一的,大家不可能不保证该“ID”的属性在目的存款和储蓄中的每种对象中存在。
    一旦创设了对象存款和储蓄,大家得以起来应用for循环增添数据进去。
     
    手动将数据增进到表:
    咱俩得以手动增添额外的数据到数据库中。

JavaScript
Code复制内容到剪贴板

  1. function Add() {   
  2. var request = db.transaction([“users”], “readwrite”).objectStore(“users”)
      
  3. .add({ id: “3”, name: “Gautam”, age: 30, email: “[email protected]” });
      
  4.     
  5. request.onsuccess = function(e) {   
  6. alert(“Gautam has been added to the database.”);   
  7. };   
  8.     
  9. request.onerror = function(e) {   
  10. alert(“Unable to add the information.”);    
  11. }   
  12.     
  13. }  

事先大家在数据库中做其余的CRUD操作(读,写,修改),必须使用工作。
该transaction()方法是用来钦定咱们想要举行事务处理的对象存款和储蓄。
transaction()方法接受二个参数(第四个和第柒个是可选的)。
第贰个是我们要拍卖的靶子存款和储蓄的列表,首个钦定大家是或不是要只读/读写,第六个是本子变化。
 
从表中读取数据 get()方法用于从指标存款和储蓄中查究数据。
我们以前已经安装对象的id作为的keyPath,所以get()方法将追寻具有同样id值的指标。
上边包车型客车代码将再次回到我们命名叫“Bidulata”的对象:

JavaScript
Code复制内容到剪贴板

  1. function Read() {   
  2. var objectStore = db.transaction([“users”]).objectStore(“users”);
      
  3. var request = objectStore.get(“2”);   
  4. request.onerror = function(event) {   
  5. alert(“Unable to retrieve data from database!”);   
  6. };   
  7. request.onsuccess = function(event) {    
  8. if(request.result) {   
  9. alert(“Name: ” + request.result.name + “, Age: ” + request.result.age + “, Email: ” + request.result.email);
      
  10. } else {   
  11. alert(“Bidulata couldn’t be found in your database!”);    
  12. }   
  13. };   
  14. }  

 
从表中读取全体数据
上边包车型地铁章程寻觅表中的全数数据。
那里咱们采纳游标来搜索对象存款和储蓄中的全数数据:

JavaScript
Code复制内容到剪贴板

  1. function ReadAll() {   
  2. var objectStore = db.transaction(“users”).objectStore(“users”); 
      
  3. var req = objectStore.openCursor();   
  4. req.onsuccess = function(event) {   
  5. db.close();   
  6. var res = event.target.result;   
  7. if (res) {   
  8. alert(“Key ” + res.key + ” is ” + res.value.name + “, Age: ” + res.value.age + “, Email: ” + res.value.email);
      
  9. res.continue();   
  10. }   
  11. };   
  12. req.onerror = function (e) {   
  13. console.log(“Error Getting: “, e);   
  14. };    
  15. }  

该openCursor()用于遍历数据库中的八个记录。
在continue()函数中三番五次读取下一条记下。
删去表中的记录 上边包车型大巴措施从指标中去除记录。

JavaScript
Code复制内容到剪贴板

  1. function Remove() {    
  2. var request = db.transaction([“users”], “readwrite”).objectStore(“users”).delete(“1”);
      
  3. request.onsuccess = function(event) {   
  4. alert(“Tapas’s entry has been removed from your database.”);   
  5. };   
  6. }  

我们要将目的的keyPath作为参数字传送递给delete()方法。
 
最终代码
下边包车型客车诀要从指标源中删除一条记下:

JavaScript
Code复制内容到剪贴板

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />  
  4. <title>IndexedDB</title>  
  5. <script type=”text/javascript”>  
  6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
      
  7.     
  8. //prefixes of window.IDB objects   
  9. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
      
  10. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
      
  11.     
  12. if (!indexedDB) {   
  13. alert(“Your browser doesn’t support a stable version of IndexedDB.”)
      
  14. }   
  15. var customerData = [   
  16. { id: “1”, name: “Tapas”, age: 33, email: “[email protected]” },
      
  17. { id: “2”, name: “Bidulata”, age: 55, email: “[email protected]” }
      
  18. ];   
  19. var db;   
  20. var request = indexedDB.open(“newDatabase”, 1);   
  21.     
  22. request.onerror = function(e) {   
  23. console.log(“error: “, e);   
  24. };   
  25.     
  26. request.onsuccess = function(e) {   
  27. db = request.result;   
  28. console.log(“success: “+ db);   
  29. };   
  30.     
  31. request.onupgradeneeded = function(event) {   
  32.     
  33. }   
  34. request.onupgradeneeded = function(event) {   
  35. var objectStore = event.target.result.createObjectStore(“users”, {keyPath: “id”});
      
  36. for (var i in userData) {   
  37. objectStore.add(userData[i]);    
  38. }   
  39. }   
  40. function Add() {   
  41. var request = db.transaction([“users”], “readwrite”)
      
  42. .objectStore(“users”)   
  43. .add({ id: “3”, name: “Gautam”, age: 30, email: “[email protected]” });
      
  44.     
  45. request.onsuccess = function(e) {   
  46. alert(“Gautam has been added to the database.”);   
  47. };   
  48.     
  49. request.onerror = function(e) {   
  50. alert(“Unable to add the information.”);    
  51. }   
  52.     
  53. }   
  54. function Read() {   
  55. var objectStore = db.transaction(“users”).objectStore(“users”);
      
  56. var request = objectStore.get(“2”);   
  57. request.onerror = function(event) {   
  58. alert(“Unable to retrieve data from database!”);   
  59. };   
  60. request.onsuccess = function(event) {    
  61. if(request.result) {   
  62. alert(“Name: ” + request.result.name + “, Age: ” + request.result.age + “, Email: ” + request.result.email);
      
  63. } else {   
  64. alert(“Bidulata couldn’t be found in your database!”);    
  65. }   
  66. };   
  67. }   
  68. function ReadAll() {   
  69. var objectStore = db.transaction(“users”).objectStore(“users”); 
      
  70. var req = objectStore.openCursor();   
  71. req.onsuccess = function(event) {   
  72. db.close();   
  73. var res = event.target.result;   
  74. if (res) {   
  75. alert(“Key ” + res.key + ” is ” + res.value.name + “, Age: ” + res.value.age + “, Email: ” + res.value.email);
      
  76. res.continue();   
  77. }   
  78. };   
  79. req.onerror = function (e) {   
  80. console.log(“Error Getting: “, e);   
  81. };    
  82. }   
  83. function Remove() {    
  84. var request = db.transaction([“users”], “readwrite”).objectStore(“users”).delete(“1”);
      
  85. request.onsuccess = function(event) {   
  86. alert(“Tapas’s entry has been removed from your database.”);   
  87. };   
  88. }   
  89. </script>  
  90. </head>  
  91.     
  92. <body>  
  93. <button onclick=”Add()”>Add record</button>  
  94. <button onclick=”Remove()”>Delete record</button>  
  95. <button onclick=”Read()”>Retrieve single record</button>  
  96. <button onclick=”ReadAll()”>Retrieve all records</button>  
  97. </body>  
  98. </html>  

localStorage是不带lock功用的。那么要贯彻前端的多中国少年共产党享并且要求lock功能那就需求运用别的本储存情势,比如indexedDB。indededDB使用的是事务处理的编写制定,那其实就是lock功用。
  做这一个测试需求先轻便的包裹下indexedDB的操作,因为indexedDB的连年相比辛苦,而且多少个测试页面都亟需用到

JavaScript
Code复制内容到剪贴板

  1. //db.js   
  2. //封装事务操作   
  3. IDBDatabase.prototype.doTransaction=function(f){   
  4.   f(this.transaction([“Obj”],”readwrite”).objectStore(“Obj”));   
  5. };   
  6. //连接数据库,成功后调用main函数   
  7. (function(){   
  8.   //张开数据库   
  9.   var cn=indexedDB.open(“TestDB”,1);   
  10.   //创制数量对象   
  11.   cn.onupgradeneeded=function(e){   
  12.     e.target.result.createObjectStore(“Obj”);   
  13.   };   
  14.   //数据库连接成功   
  15.   cn.onsuccess=function(e){   
  16.     main(e.target.result);   
  17.   };   
  18. })();   
  19.   接着是四个测试页面   
  20. <script src=”db.js”></script>  
  21. <script>  
  22. //a.html   
  23. function main(e){   
  24.   (function callee(){   
  25.     //发轫三个事务   
  26.     e.doTransaction(function(e){   
  27.       e.put(1,”test”); //设置test的值为1   
  28.       e.put(2,”test”); //设置test的值为2   
  29.     });   
  30.     setTimeout(callee);   
  31.   })();   
  32. };   
  33. </script>  
  34. <script src=”db.js”></script>  
  35. <script>  
  36. //b.html   
  37. function main(e){   
  38.   (function callee(){   
  39.     //起头一个政工   
  40.     e.doTransaction(function(e){   
  41.       //获取test的值   
  42.       e.get(“test”).onsuccess=function(e){   
  43.         console.log(e.target.result);   
  44.       };   
  45.     });   
  46.     setTimeout(callee);   
  47.   })();   
  48. };   
  49. </script>  

把localStorage换到了indexedDB事务处理。可是结果就不相同

www.301.net 1

测试的时候b.html中或者不会立刻有出口,因为indexedDB正忙着处理a.html东西,b.html事务丢在了思想政治工作丢队列中等待。不过无论怎么着,输出结果也不会是一以此值。因为indexedDB的细小处理单位是工作,而不是localStorage这样以表达式为单位。那样1旦把lock和unlock之间须求处理的东西放入八个业务中就能够达成。此外,浏览器对indexedDB的支撑不如localStorage,所以选用时还得挂念浏览器兼容。

那篇小说主要介绍了尖锐解析HTML5中的IndexedDB索引数据库,包含事务锁等基本功能的相干使…

 

前者的数据库:IndexedDB入门

2014/12/27 · 未分类 · IndexedDB

本文由 伯乐在线 –
cucr
翻译,黄利民
校稿。未经许可,禁止转发!
英文出处:www.codemag.com。欢迎参与翻译组。

应用程序需求多少。对超过四分之二Web应用程序来说,数据在服务器端组织和治本,客户端通过互联网请求获取。随着浏览器变得特别有能力,由此可挑选在浏览器存款和储蓄和控制应用程序数据。

本文向你介绍名称叫IndexedDB的浏览器端文档数据库。使用lndexedDB,你能够通过惯于在劳务器端数据库差不离如出壹辙的艺术创制、读取、更新和删除多量的记录。请使用本文中可工作的代码版本去感受,完整的源代码能够由此GitHub库找到。

读到本学科的末尾时,你将熟习IndexedDB的基本概念以及哪些落到实处1个用到IndexedDB执行总体的CRUD操作的模块化JavaScript应用程序。让大家略微亲近IndexedDB并初叶吧。

什么是IndexedDB

貌似的话,有三种区别类型的数据库:关系型和文书档案型(也号称NoSQL或对象)。关全面据库如SQL
Server,MySQL,Oracle的多少存款和储蓄在表中。文书档案数据库如MongoDB,CouchDB,Redis将数据集作为个人对象存款和储蓄。IndexedDB是二个文书档案数据库,它在一点壹滴内放置浏览器中的1个沙盒环境中(强制依照(浏览器)同源策略)。图1来得了IndexedDB的数目,体现了数据库的结构

www.301.net 2

图1:开荒者工具查看3个object
store

整套的IndexedDB API请参见完整文书档案

  };

关于小编:cucr

www.301.net 3

新浪博客园:@hop_ping
个人主页 ·
小编的稿子 ·
17

www.301.net 4

    renderTodo(result.value);

指标仓库

object
store是IndexedDB数据库的基本功。若是您利用过关全面据库,平常能够将object
store等价于两个数码库表。Object
stores包涵三个或五个目录,在store中遵从1对键/值操作,那提供一种高效稳定数据的艺术。

当你安排二个object
store,你不能够不为store采纳2个键。键在store中能够以“in-line”或“out-of-line”的章程存在。in-line键通过在数据对象上引用path来保持它在object
store的唯一性。为了表达那一点,想想1个囊括电子邮件地址属性Person对象。您能够配备你的store使用in-line键emailAddress,它能确定保证store(持久化对象中的数据)的唯一性。其它,out-of-line键通过单独于数据的值识别唯1性。在那种情景下,你能够把out-of-line键比作3个平头值,它(整数值)在关周全据库中充当记录的主键。

图一显得了任务数据保存在任务的object
store,它利用in-line键。在那些案例中,键对应于对象的ID值。

 

铺设基础

本条例子从落到实处如此2个模块起始,它担负从数据库读取数据,插入新的对象,更新现有对象,删除单个对象和提供在一个object
store删除全体目的的选项。这一个事例完结的代码是通用的数目访问代码,您能够在任何object
store上利用。

那个模块是通过三个及时实施函数表明式(IIFE)实现,它选择对象字面量来提供协会。上面包车型地铁代码是模块的摘要,表达了它的骨干协会。

JavaScript

(function (window) { ‘use strict’; var db = { /* implementation here
*/ }; window.app = window.app || {}; window.app.db = db; }(window));

1
2
3
4
5
6
7
8
(function (window) {
    ‘use strict’;
    var db = {
        /* implementation here */
    };
    window.app = window.app || {};
    window.app.db = db;
}(window));

用那样的布局,能够使那个应用程序的享有逻辑封装在三个名称叫app的单对象上。别的,数据库相关的代码在1个称为db的app子对象上。

本条模块的代码应用IIFE,通过传递window对象来保管模块的熨帖范围。使用use
strict确认保障那些函数的代码函数是比照(javascript严厉格局)严谨编写翻译规则。db对象作为与数据库交互的具有函数的根本容器。最终,window对象检查app的实例是不是留存,倘若存在,模块使用当前实例,尽管不存在,则开创3个新对象。壹旦app对象成功重返或创制,db对象附加到app对象。

正文的其他部分将代码加多到db对象内(在implementation
here会
评论),为应用程序提供特定于数据库的逻辑。因此,如您所见本文前边的1部分中定义的函数,想想父db对象活动,但全数任何职能都以db对象的分子。完整的数据库模块列表见清单二。

  var db = html5rocks.indexedDB.db;

利用概述

在本教程中,您将学习如何创立一个应用IndexedDB存款和储蓄数据的模块化JavaScript应用程序。为了驾驭应用程序是如何行事的,参考图4,它讲述了职分应用程序处于空白状态。从此处您能够为列表增加新任务。图伍显得了录入了多少个义务到系统的画面。图陆来得怎么删除二个任务,图七展现了正在编写任务时的应用程序。

www.301.net 5

图四:空白的职务应用程序

www.301.net 6

图伍:职分列表

www.301.net 7

图陆:删除任务

www.301.net 8

图柒:编辑义务
未来您熟谙的应用程序的功效,下一步是始于为网址铺设基础。

    if(v!= db.version) {

使用IndexedDB

现行,你曾经有机会熟谙了有的的一体化概念,下一步是开头完毕基于IndexedDB的应用程序。第三个步骤供给统壹IndexedDB在差别浏览器的达成。您能够很轻易地丰硕种种厂商天性的抉择的反省,同时在window对象上把它们设置为法定对象相同的称谓。下边包车型客车清单展现了window.indexedDB,window.IDBTransaction,window.IDBKeyRange的末尾结果是怎么样都被更新,它们棉被服装置为对应的浏览器的一定实现。

JavaScript

window.indexedDB = window.indexedDB || window.mozIndexedDB ||
window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction =
window.IDBTransaction || window.webkitIDBTransaction ||
window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange || window.msIDBKeyRange;

1
2
3
4
5
6
7
8
9
10
window.indexedDB = window.indexedDB ||
                   window.mozIndexedDB ||
                   window.webkitIndexedDB ||
                   window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
                   window.webkitIDBTransaction ||
                   window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
                   window.webkitIDBKeyRange ||
                   window.msIDBKeyRange;

现今,各个数据库相关的全局对象具备正确的本子,应用程序可以准备利用IndexedDB初始工作。

www.301.net, 

谬误冒泡

自然,有时候,请求大概不会按预想完结。IndexedDB
API通过荒谬冒泡效果来帮衬跟踪和治本漏洞百出。如果1个特定的伸手碰到错误,你能够品尝在央求对象上处理错误,或许您能够允许错误通过调用栈冒泡向上传递。这些冒泡性情,使得你不须要为每一种请求完结特定错误处理操作,而是能够挑选只在四个越来越高品级上增加错误处理,它给您3个火候,保持你的错误处理代码简洁。本文中完结的事例,是在三个高品级处理错误,以便更加细粒度操作产生的其它错误冒泡到通用的错误处理逻辑。

  var db = html5rocks.indexedDB.db;

履行用户分界面特定代码

明日怀有特定于数据库的代码被封装在app.db模块中,用户分界面特定代码能够动用此模块来与数据库交互。用户分界面特定代码的完好清单(index.ui.js)能够在清单三中赢得,完整的(index.html)页面包车型客车HTML源代码能够在清单四中收获。

  };

IndexedDB是或不是符合小编的应用程序?

当今最要害的难点:“IndexedDB是或不是符合本身的应用程序?“像往常壹律,答案是一定的:“视情形而定。“首先当您准备在客户端保存数据时,你会设想HTML伍地点存款和储蓄。当地存款和储蓄得到广大浏览器的支撑,有不行便于使用的API。简单有其优势,但其劣势是力不从心支撑复杂的寻觅策略,存储大批量的数量,并提供工作协助。

IndexedDB是三个数据库。所以,当你想为客户端做出决定,思考你如何在服务端选用三个持久化介质的数据库。你或者会问自身有个别题材来补助控制客户端数据库是不是适合您的应用程序,包罗:

  • 你的用户通过浏览器访问您的应用程序,(浏览器)援助IndexedDB API吗 ?
  • 您须求仓储大批量的数码在客户端?
  • 你必要在二个巨型的多寡集合中高速稳定单个数据点?
  • 您的架构在客户端需求工作帮助吗?

一旦您对内部的别的难点回答了“是的”,很有不小或然,IndexedDB是您的应用程序的一个很好的候选。

既然如此数据现已在数据库中了,我们就需求通过某种方式以有意义的法门访问数据。幸运的是,这样的诀窍相当轻巧直接:

Implementing Database-Specific Code

对数据库的各种操作关联着二个先决条件,即有1个开垦的数据库。当数据库正在被展开时,通过检查数据库版本来判定数据库是还是不是必要其余改变。上边包车型大巴代码呈现了模块怎样跟踪当前版本,object
store名、某成员(保存了一旦数据库展开请求完结后的数据库当前实例)。

JavaScript

version: 1, objectStoreName: ‘tasks’, instance: {},

1
2
3
version: 1,
objectStoreName: ‘tasks’,
instance: {},

在此地,数据库展开请求发生时,模块请求版本①数据库。如若数据库不设有,也许版本小于一,upgrade
needed事件在展开请求完结前触发。这几个模块被安装为只使用1个object
store,所以名字直接定义在那边。最终,实例成员被创制,它用来保存一旦展开请求完毕后的数据库当前实例。

接下去的操作是贯彻upgrade
needed事件的事件处理程序。在此间,检查当前object
store的名字来判断请求的object store名是或不是存在,假使不设有,成立object
store。

JavaScript

upgrade: function (e) { var _db = e.target.result, names =
_db.objectStoreNames, name = db.objectStoreName; if
(!names.contains(name)) { _db.createObjectStore( name, { keyPath: ‘id’,
autoIncrement: true }); } },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
upgrade: function (e) {
    var
        _db = e.target.result,
        names = _db.objectStoreNames,
        name = db.objectStoreName;
    if (!names.contains(name)) {
        _db.createObjectStore(
            name,
            {
                keyPath: ‘id’,
                autoIncrement: true
            });
    }
},

在这一个事件处理程序里,通过事件参数e.target.result来访问数据库。当前的object
store名称的列表在_db.objectStoreName的字符串数组上。现在,若是object
store不设有,它是经过传递object
store名称和store的键的定义(自增,关联到数码的ID成员)来创设。

模块的下四个功能是用来捕获错误,错误在模块不一致的伸手创制时冒泡。

JavaScript

errorHandler: function (error) { window.alert(‘error: ‘ +
error.target.code); debugger; },

1
2
3
4
errorHandler: function (error) {
    window.alert(‘error: ‘ + error.target.code);
    debugger;
},

在此处,errorHandler在叁个警告框彰显其余不当。这几个函数是假意保持轻便,对开辟协调,当你学习运用IndexedDB,您能够很轻易地看到其余错误(当他们发生时)。当您准备在生产条件使用那么些模块,您供给在这些函数中落实部分错误处理代码来和您的应用程序的上下文打交道。

近期基础完成了,那1节的别的部分将演示如何兑现对数据库执行一定操作。第四个需求检讨的函数是open函数。

JavaScript

open: function (callback) { var request = window.indexedDB.open(
db.objectStoreName, db.version); request.onerror = db.errorHandler;
request.onupgradeneeded = db.upgrade; request.onsuccess = function (e) {
db.instance = request.result; db.instance.onerror = db.errorHandler;
callback(); }; },

1
2
3
4
5
6
7
8
9
10
11
12
open: function (callback) {
    var request = window.indexedDB.open(
        db.objectStoreName, db.version);
    request.onerror = db.errorHandler;
    request.onupgradeneeded = db.upgrade;
    request.onsuccess = function (e) {
        db.instance = request.result;
        db.instance.onerror =
            db.errorHandler;
        callback();
    };
},

open函数试图展开数据库,然后实施回调函数,告知数据库成功展开药方可准备利用。通过拜访window.indexedDB调用open函数来成立张开请求。那么些函数接受你想展开的object
store的名称和你想行使的数据库版本号。

一旦请求的实例可用,第三步要开始展览的做事是设置错误处理程序和升高函数。记住,当数据库被展开时,借使脚本请求比浏览器里越来越高版本的数据库(也许只要数据库不存在),进级函数运维。可是,假使请求的数据库版本相配当前数据库版本同时没错误,success事件触发。

倘诺一切成功,展开数据库的实例能够从呼吁实例的result属性获得,那一个实例也缓存到模块的实例属性。然后,onerror事件设置到模块的errorHandler,作为今后别的请求的错误捕捉处理程序。最终,回调被实践来报告调用者,数据库已经展开并且正确地计划,能够利用了。

下叁个要促成的函数是helper函数,它回到所请求的object store。

JavaScript

getObjectStore: function (mode) { var txn, store; mode = mode ||
‘readonly’; txn = db.instance.transaction( [db.objectStoreName],
mode); store = txn.objectStore( db.objectStoreName); return store; },

1
2
3
4
5
6
7
8
9
getObjectStore: function (mode) {
    var txn, store;
    mode = mode || ‘readonly’;
    txn = db.instance.transaction(
        [db.objectStoreName], mode);
    store = txn.objectStore(
        db.objectStoreName);
    return store;
},

在此地,getObjectStore接受mode参数,允许你决定store是以只读依旧读写格局请求。对于这几个函数,默许mode是只读的。

各类针对object
store的操作都是在贰个东西的内外文中执行的。事务请求接受3个object
store名字的数组。这一个函数此番被布署为只行使三个object
store,但是壹旦你须求在工作中操作七个object store,你须求传递四个object
store的名字到数组中。事务函数的第四个参数是2个方式。

假使事情请求可用,您就能够通过传递供给的object
store名字来调用objectStore函数以获得object
store实例的访问权。这一个模块的别的函数使用getObjectStore来获得object
store的访问权。

下1个兑现的函数是save函数,执行插入或更新操作,它遵照传入的数量是还是不是有贰个ID值。

JavaScript

save: function (data, callback) { db.open(function () { var store,
request, mode = ‘readwrite’; store = db.getObjectStore(mode), request =
data.id ? store.put(data) : store.add(data); request.onsuccess =
callback; }); },

1
2
3
4
5
6
7
8
9
10
11
12
save: function (data, callback) {
    db.open(function () {
        var store, request,
            mode = ‘readwrite’;
 
        store = db.getObjectStore(mode),
        request = data.id ?
            store.put(data) :
            store.add(data);
        request.onsuccess = callback;
    });
},

save函数的七个参数分别是须求保留的数目对象实例和操作成功后须要执行的回调。读写方式用于将数据写入数据库,它被传到到getObjectStore来赢得object
store的二个可写实例。然后,检查数据对象的ID成员是或不是留存。假设存在ID值,数据必须创新,put函数被调用,它创设持久化请求。不然,要是ID不设有,这是新数据,add请求重临。最后,不管put也许add
请求是或不是执行了,success事件处理程序须求设置在回调函数上,来告诉调用脚本,一切进展顺遂。

下1节的代码在清单1所示。getAll函数首先张开数据库和访问object
store,它为store和cursor(游标)分别设置值。为数据库游标设置游标变量允许迭代object
store中的数据。data变量设置为多个空数组,充当数据的器皿,它回到给调用代码。

在store访问数据时,游标遍历数据库中的每条记下,会触发onsuccess事件处理程序。当每条记下走访时,store的数目足以通过e.target.result事件参数获得。即便实际多少从target.result的value属性中赢得,首先要求在盘算访问value属性前确定保证result是1个立见成效的值。即使result存在,您能够加多result的值到数据数组,然后在result对象上调用continue函数来继续迭代object
store。最后,假设未有reuslt了,对store数据的迭代结束,同时数据传递到回调,回调被实践。

到现在模块能够从data
store得到全数数据,下1个亟待达成的函数是肩负访问单个记录。

JavaScript

get: function (id, callback) { id = parseInt(id); db.open(function () {
var store = db.getObjectStore(), request = store.get(id);
request.onsuccess = function (e){ callback(e.target.result); }; }); },

1
2
3
4
5
6
7
8
9
10
11
get: function (id, callback) {
    id = parseInt(id);
    db.open(function () {
        var
            store = db.getObjectStore(),
            request = store.get(id);
        request.onsuccess = function (e){
            callback(e.target.result);
        };
    });
},

get函数执行的第二步操作是将id参数的值调换为三个整数。取决于函数被调用时,字符串或整数都只怕传递给函数。这一个达成跳过了对假设所给的字符串不能够调换来整数该怎么做的气象的处理。壹旦贰个id值准备好了,数据库张开了和object
store能够访问了。获取访问get请求出现了。请求成功时,通过传播e.target.result来推行回调。它(e.target.result)是因而调用get函数到手的单条记录。

前天保留和抉择操作已经面世了,该模块还要求从object store移除数量。

JavaScript

‘delete’: function (id, callback) { id = parseInt(id); db.open(function
() { var mode = ‘readwrite’, store, request; store =
db.getObjectStore(mode); request = store.delete(id); request.onsuccess =
callback; }); },

1
2
3
4
5
6
7
8
9
10
11
‘delete’: function (id, callback) {
    id = parseInt(id);
    db.open(function () {
        var
            mode = ‘readwrite’,
            store, request;
        store = db.getObjectStore(mode);
        request = store.delete(id);
        request.onsuccess = callback;
    });
},

delete函数的称呼用单引号,因为delete是JavaScript的保留字。那足以由你来控制。您能够挑选命名函数为del或别的名目,可是delete用在这么些模块为了API尽恐怕好的表述。

传递给delete函数的参数是指标的id和三个回调函数。为了维持那些完毕轻易,delete函数约定id的值为整数。您可以采取创制1个更加壮的落到实处来处理id值不能分析成整数的失实例子的回调,但为了辅导原因,代码示例是明知故犯的。

倘诺id值能保障调换来三个平头,数据库被张开,三个可写的object
store获得,delete函数字传送入id值被调用。当呼吁成功时,将实行回调函数。

在有些情状下,您也许必要删除2个object
store的富有的笔录。在那种场地下,您访问store同时排除全部内容。

JavaScript

deleteAll: function (callback) { db.open(function () { var mode, store,
request; mode = ‘readwrite’; store = db.getObjectStore(mode); request =
store.clear(); request.onsuccess = callback; }); }

1
2
3
4
5
6
7
8
9
deleteAll: function (callback) {
    db.open(function () {
        var mode, store, request;
        mode = ‘readwrite’;
        store = db.getObjectStore(mode);
        request = store.clear();
        request.onsuccess = callback;
    });
}

那里deleteAll函数负责张开数据库和走访object
store的一个可写实例。1旦store可用,3个新的央浼通过调用clear函数来成立。一旦clear操作成功,回调函数被执行。

html5rocks.indexedDB.open = function() {

开垦数据库的乞请生命周期

IndexedDB使用事件生命周期管理数据库的开发和布局操作。图2演示了二个展开的恳求在肯定的环境下爆发upgrade
need事件。

www.301.net 9

图二:IndexedDB展开请求的生命周期

装有与数据库的互动初始于二个开发的乞求。试图打开数据库时,您必须传递二个被呼吁数据库的版本号的整数值。在张开请求时,浏览器相比你传入的用来打开请求的版本号与实际数据库的版本号。倘诺所请求的版本号高于浏览器中当前的版本号(恐怕以后不曾存在的数据库),upgrade
needed事件触发。在uprade
need事件时期,你有机遇通过丰盛或移除stores,键和索引来操纵object stores。

若果所请求的数据库版本号和浏览器的脚下版本号1样,可能晋级进度做到,六个张开的数据库将回到给调用者。

[html] 

依据事务

分化于1些守旧的关周全据库的贯彻,每3个对数据库操作是在三个作业的左右文中执行的。事务限制二回影响3个或七个object
stores,你通过传播三个object store名字的数组到创立工作限制的函数来定义。

创造工作的首个参数是工作方式。当呼吁2个事务时,必须控制是安份守己只读依旧读写形式请求访问。事务是能源密集型的,所以即使您不要求退换data
store中的数据,你只须求以只读方式对object stores集合进行呼吁访问。

清单2演示了什么样运用特出的情势开创1个事情,并在那片小说的 Implementing
Database-Specific Code
 部分开始展览了详细座谈。

[html] 

浏览器帮助

大概在支付Web应用程序最重大的题材是:“浏览器是还是不是协助本人想要做的?“就算浏览器对IndexedDB的支撑在后续拉长,选取率并不是大家所企盼的那么普遍。图叁出示了caniuse.com网址的报告,扶助IndexedDB的为66%多一小点。最新版本的银狐,Chrome,Opera,Safar,iOS
Safari,和Android完全补助IndexedDB,Internet
Explorer和Nokia部分辅助。尽管这几个列表的维护者是令人鼓舞的,但它没有告诉全数传说。

www.301.net 10

图三:浏览器对IndexedDB的协理,来自caniuse.com

只有充裕新本子的Safari和iOS Safari
支持IndexedDB。据caniuse.com彰显,那只占大概0.0一%的全世界浏览器选拔。IndexedDB不是一个您觉得能够理所当然获得援救的现代Web
API,可是你将高速会那样认为。

  var trans = db.transaction([“todo”], IDBTransaction.READ_WRITE, 0);

据悉请求

以至于那里,有三个频繁出现的大旨,您恐怕早已注意到。对数据库的每便操作,描述为经过一个伸手展开数据库,访问贰个object
store,再持续。IndexedDB
API天生是依据请求的,那也是API异步个性提示。对于你在数据库执行的每一次操作,你必须首先为这一个操作创造三个请求。当呼吁完毕,你能够响应由请求结果产生的轩然大波和谬误。

正文完毕的代码,演示了什么运用请求展开数据库,创立三个事情,读取object
store的始末,写入object store,清空object store。

  request.onerror = function(e) {

规划规范

IndexedDB的框架结构很像在1些风行的劳动器端NOSQL数据库达成中的设计规范类型。面向对象数据经过object
stores(对象仓库)进行持久化,全体操作基于请求同时在工作限制内进行。事件生命周期使您可见支配数据库的配置,错误通过荒谬冒泡来使用API管理。

第 2步:成立对象存款和储蓄

另一种选拔

浏览器帮助本地数据库并不是从IndexedDB才初阶落实,它是在WebSQL兑现之后的一种新点子。类似IndexedDB,WebSQL是叁个客户端数据库,但它看作贰个关全面据库的贯彻,使用结构化查询语言(SQL)与数据库通讯。WebSQL的历史充满了曲折,但底线是未曾主流的浏览器厂商对WebSQL继续帮助。

即使WebSQL实际上是多个吐弃的技能,为啥还要提它吗?风趣的是,WebSQL在浏览器里拿走加强的匡助。Chrome,
Safari, iOS Safari, and
Android 浏览器都帮忙。其余,并不是那一个浏览器的风行版本才提供支持,许多这几个新颖最佳的浏览器在此之前的本子也足以辅助。有意思的是,借使你为WebSQL增多支持来支撑IndexedDB,你突然发现,许多浏览器厂商和版本成为辅助浏览器内置数据库的某种化身。

就此,假诺你的应用程序真正须求3个客户端数据库,你想要达到的最高品级的应用恐怕,当IndexedDB不可用时,恐怕你的应用程序恐怕看起来须要选拔接纳WebSQL来支撑客户端数据架构。即使文书档案数据库和关周详据库管理数据有明确的不一样,但如若您有不利的肤浅,就足以动用本地数据库构建三个应用程序。

    html5rocks.indexedDB.getAllTodoItems();

  var store = trans.objectStore(“todo”);

 

 

因而 HTML
扶助IndexedDB是事务性的。在事情之外是不可能执行命令或张开指针的。事务包蕴如下类型:读/写作业、只读事务和快速照相事务。在本教程中,大家利用的是读/写作业。

html5rocks.indexedDB.getAllTodoItems = function() {    var todos =
document.getElementById(“todoItems”);    todos.innerHTML = “”;      var
db = html5rocks.indexedDB.db;    var trans = db.transaction([“todo”],
IDBTransaction.READ_WRITE, 0);    var store =
trans.objectStore(“todo”);      // Get everything in the store;    var
keyRange = IDBKeyRange.lowerBound(0);    var cursorRequest =
store.openCursor(keyRange);      cursorRequest.onsuccess = function(e) {
     var result = e.target.result;      if(!!result == false)      
 return;        renderTodo(result.value);      result.continue();    };
     cursorRequest.onerror = html5rocks.indexedDB.onerror;  };
 html5rocks.indexedDB.getAllTodoItems = function() {

 

[html] 

第 4步:查询存款和储蓄中的数据。

第 4 步:显示对象存款和储蓄中的数据

[html]

 

 

 

 

    “timeStamp” : new Date().getTime()

 

各大主流浏览器(包蕴Chrome浏览器、Safari、Opera等)和大概拥有基于Webkit的位移装备均帮助WebSQL,并且很有希望在可预知的前程再三再四提供帮衬。

您必须先展开数据库,才能对其开展操作。 

既是使用有权访问对象存款和储蓄,我们就足以因而基础JSON
对象发出简短的put命令。请留意timeStamp属性,那是指标的绝无仅有密钥,并视作“keyPath”使用。put调用成功后,会触发onsuccess事件,然后大家就足以在荧屏上海展览中心现内容了。

 

  request.onfailure = html5rocks.indexedDB.onerror;

      setVrequest.onfailure = html5rocks.indexedDB.onerror;

  });

  var trans = db.transaction([“todo”], IDBTransaction.READ_WRITE, 0);

  var store = trans.objectStore(“todo”);

      };

function init() {    html5rocks.indexedDB.open(); // open displays the
data previously saved  }    window.addEventListener(“DOMContentLoaded”,
init, false);  function init() {

}对于某些钦命的待办事项,大家只须求获得文本并为其塑造用户分界面(包蕴“删除”按键,以便除去待办事项)。

 

        html5rocks.indexedDB.getAllTodoItems();

 

 

          {keyPath: “timeStamp”});

本学科只是举了二个实际示例,告诉您针对编写为运用WebSQL
的幸存应用如何行使IndexedDB。 

第 六步:全体关系起来

IndexedDB的差异之处在于,您能够创制有个别项目数据的指标存储,然后只需将JavaScript对象留存在该存款和储蓄中就能够。每一个对象存款和储蓄都足以有目录的聚集,那样就能进行快捷的查询和迭代。

}上述代码其实有点不清成效。我们在
API中定义了“open”方法,调用此方法就可以展开“todos”数据库。打开请求不是当下实施的,而是重临IDBRequest。假使当前函数存在,则会调用indexedDB.open方法。那与大家常见内定异步回调的章程略有分歧,不过大家在回调执行前,有机会向IDBRequest对象附加大家友好的监听器。

      return;

  cursorRequest.onerror = html5rocks.indexedDB.onerror;

  var request = store.delete(id);

 

先决条件

始建了对象存储后,大家调用 getAllTodoItems方法。

 

[html] 

 

    result.continue();

function renderTodo(row) {    var todos =
document.getElementById(“todoItems”);    var li =
document.createElement(“li”);    var a = document.createElement(“a”);  
 var t = document.createTextNode();    t.data = row.text;    
 a.addEventListener(“click”, function(e) {    
 html5rocks.indexedDB.deleteTodo(row.text);    });      a.textContent =
” [Delete]”;    li.appendChild(t);    li.appendChild(a);  
 todos.appendChild(li)  }  function renderTodo(row) {

    var result = e.target.result;

  // Get everything in the store;

var html5rocks = {};  html5rocks.indexedDB = {};  var html5rocks = {};

 

假若展开请求成功了,大家的
onsuccess回调就会实施。在此回调中,我们应检查数据库版本,如若与预期版本不符,则调用“setVersion”。

 

代替的是
IndexedDB,本学科的宗旨是开垦人士应选用这种数据存款和储蓄在客户端上囤积数据并打开操作。

  var todos = document.getElementById(“todoItems”);

IndexedDB 还撤废了正式查询语言(
SQL)的定义,取而代之的是针对性索引的询问,那样能够生出三个指针,用于在结果集以内迭代。

 

现行反革命大家有了事情、对要查询的贮存的引用以及要迭代的界定。剩下的干活正是开垦指针并附加“onsuccess”事件了。

  };

  var todos = document.getElementById(“todoItems”);

  todos.appendChild(li)

  request.onsuccess = function(e) {

html5rocks.indexedDB.addTodo = function(todoText) {    var db =
html5rocks.indexedDB.db;    var trans = db.transaction([“todo”],
IDBTransaction.READ_WRITE, 0);    var store =
trans.objectStore(“todo”);    var request = store.put({      “text”:
todoText,      “timeStamp” : new Date().getTime()    });    
 request.onsuccess = function(e) {      // Re-render all the todo’s    
 html5rocks.indexedDB.getAllTodoItems();    };      request.onerror =
function(e) {      console.log(e.value);    };  };
 html5rocks.indexedDB.addTodo = function(todoText) {

[html] 

}

html5rocks.indexedDB.open = function() {    var request =
indexedDB.open(“todos”,      “This is a description of the database.”);
     request.onsuccess = function(e) {      var v = “1.0”;    
 html5rocks.indexedDB.db = e.target.result;      var db =
html5rocks.indexedDB.db;      // We can only create Object stores in a
setVersion transaction;      if(v!= db.version) {        var setVrequest
= db.setVersion(v);          // onsuccess is the only place we can
create Object Stores        setVrequest.onfailure =
html5rocks.indexedDB.onerror;        setVrequest.onsuccess = function(e)
{          var store = db.createObjectStore(“todo”,            {keyPath:
“timeStamp”});            html5rocks.indexedDB.getAllTodoItems();      
 };      }        html5rocks.indexedDB.getAllTodoItems();    };    
 request.onfailure = html5rocks.indexedDB.onerror;  }
 html5rocks.indexedDB.open = function() {

 

  a.addEventListener(“click”, function(e) {

};addTodo方法至极简单,大家率先取得数据库对象的立即引用,先导化READ_W奥迪Q5ITE事务,并得到大家对象存款和储蓄的引用。

    html5rocks.indexedDB.db = e.target.result;

 

  var a = document.createElement(“a”);

    // We can only create Object stores in a setVersion transaction;

  };

    console.log(e.value);

    html5rocks.indexedDB.getAllTodoItems();  // Refresh the screen

 

IndexedDB是什么?

第 3步:向目的存款和储蓄添扩展少

  var request = indexedDB.open(“todos”,

 

  request.onfailure = html5rocks.indexedDB.onerror;

    var db = html5rocks.indexedDB.db;

 

 

function addTodo() {    var todo = document.getElementById(‘todo’);    
 html5rocks.indexedDB.addTodo(todo.value);  

缘何是 IndexedDB?

 

    html5rocks.indexedDB.deleteTodo(row.text);

 

 

  request.onsuccess = function(e) {

  var request = store.put({

 

  request.onsuccess = function(e) {

};请留心,本例中运用的有所那个命令都以异步的,因而数据不是从事务内部重临的。

该代码可转移事务,并将对于数据的
keyRange寻觅实例化。keyRange定义了大家要从存款和储蓄中询问的简短数据子集。若是存款和储蓄的keyRange是数字时间戳,大家应将追寻的纤维值设为0(时间原点后的其余时间),那样就能回到全数数据。

 

 

 

 

 

在大部景况下,假如您使用的是索引型数据库,那么就会使用异步API。异步API是非阻塞系统,由此不会经过重临值获得数据,而是得到传递到钦点回调函数的数量。

    var v = “1.0”;

  };

};正如将数据
put到目标存款和储蓄中的代码1样,删除数据也相当的粗略。运行3个业务,通过对象引用对象存款和储蓄,然后经过对象的唯一ID发出delete命令。

  t.data = row.text;

  var store = trans.objectStore(“todo”);

IndexedDB是目的存款和储蓄,它分化于带有表格(包蕴行和列的汇集)的关周密据库。那是一个重大的常有差异,并且会影响你设计和塑造利用的秘籍。

 

setVersion
是代码中绝无仅有能让我们转移数据库结构的地点。在setVersion中,大家可以创建和删除对象存款和储蓄,以及营造和删除索引。调用setVersion可重返IDBRequest对象,供我们在中间附加回调。假如成功了,大家就起来创制对象存款和储蓄。

从指标存款和储蓄中抓取了数据后,将对指针中的每一个结果调用renderTodo方法。

window.add伊夫ntListener(“DOMContentLoaded”, init,
false);这须要用到可将数据收取 DOM的函数,即
html五rocks.indexedDB.addTodo方法: 

第 1步:张开数据库

    }

[html]

    “text”: todoText,

咱俩要构建的是待办事项列表管理器,由此必须求力所能及向数据库中加多待办事项。方法如下:

      setVrequest.onsuccess = function(e) {

  request.onerror = function(e) {

      // onsuccess is the only place we can create Object Stores

  html5rocks.indexedDB.open(); // open displays the data previously
saved

    html5rocks.indexedDB.db = e.target.result;

  a.textContent = ” [Delete]”;

    if(!!result == false)

IndexedDB是HTML5中的新增效益。网络数据库托管并留存在用户的浏览器内。只要让开采职员通过增多的询问功能创制应用,就能够预知到,将会并发能够同时在线和离线使用的最新网络利用。

};我们已伸开名称叫“todos”的数据库,并已将其分配给html五rocks.indexedDB对象中的db变量。以往大家得以在任何课程中选拔此变量来引用大家的数据库。

简介

  li.appendChild(a);

 

    html5rocks.indexedDB.getAllTodoItems();

  var cursorRequest = store.openCursor(keyRange);

  var keyRange = IDBKeyRange.lowerBound(0);

 

[html] 

  cursorRequest.onsuccess = function(e) {

  todos.innerHTML = “”;

该示例使用命名空间封装数据库逻辑。 

因而对
createObjectStore单次调用成立对象存款和储蓄。该方法会命名存储以及参数对象。参数对象13分重要,它可让您定义主要的可选属性。就大家而言,定义keyPath属性可让单个对象在蕴藏中保有唯一性。本例中的该属性为“timeStamp”。objectStore中储存的各种对象都必须有“timeStamp”。

    // Do some more stuff in a minute

 

  var trans = db.transaction([“todo”], IDBTransaction.READ_WRITE, 0);

 

 

    “This is a description of the database.”);

        var store = db.createObjectStore(“todo”,

html伍rocks.indexedDB = {};异步和事务性

  var t = document.createTextNode();

html5rocks.indexedDB.deleteTodo = function(id) {    var db =
html5rocks.indexedDB.db;    var trans = db.transaction([“todo”],
IDBTransaction.READ_WRITE, 0);    var store =
trans.objectStore(“todo”);      var request = store.delete(id);    
 request.onsuccess = function(e) {    
 html5rocks.indexedDB.getAllTodoItems();  // Refresh the screen    };  
   request.onerror = function(e) {      console.log(e);    };  };
 html5rocks.indexedDB.deleteTodo = function(id) {

 

IndexedDB是HTML5中的新增效益。互联网数据库托管并留存在用户的浏览器内。只要让开辟职员通过增添的询问成效创设应用,就足以预感到…

您不得不在“SetVersion”事务内创设对象存款和储蓄。作者还尚无介绍setVersion,那是多少个百般关键的章程,那是代码中唯一能够供你创制对象存储和目录的地点。

 

 

 

  li.appendChild(t);

 

  var li = document.createElement(“li”);

  var request = indexedDB.open(“todos”);

 

    // Re-render all the todo’s

  };

结果会传送到对指针的打响回调,并在里头表现。对于各类结果只会运维1回回调,由此请务必持续迭代您需求的多寡,以保障对结果对象调用“continue”。

 

      var setVrequest = db.setVersion(v);

 

在 20拾 年 六月 18 日,W3C公布弃用Web
SQL数据库规范。那也等于提议互联网开荒职员不要再使用那种技能了,该规范也不会再取得新的更新,而且不鼓励浏览器供应商支持该技能。

  var db = html5rocks.indexedDB.db;

在价值观的关全面据存储中,我们有三个“待办事项”的报表,个中各行存款和储蓄了用户待办事项数据的成团,而各列则是数据的命名类型。要插入数据,日常接纳如下语义:INSE帕杰罗TINTO
Todo(id, data, update_time) VALUES (1, “Test”,”01/01/2010″);

在加载网页时,张开数据库并创制表格(如有须要),然后展现数据库中只怕已存在的其他待办事项。

  };

 

  request.onsuccess = function(e) {

第 5步:删除表格中的数据

 

 

[html] 

    console.log(e);

  });

 

html5rocks.indexedDB.db = null;    html5rocks.indexedDB.open =
function() {    var request = indexedDB.open(“todos”);    
 request.onsuccess = function(e) {      html5rocks.indexedDB.db =
e.target.result;      // Do some more stuff in a minute    };    
 request.onfailure = html5rocks.indexedDB.onerror;  };
 html5rocks.indexedDB.db = null;

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注