├── README.md
└── indexeddb-examples
├── idbcursor
├── index.html
├── scripts
│ └── main.js
└── style
│ └── style.css
├── idbindex
├── index.html
├── scripts
│ └── main.js
└── style
│ └── style.css
└── idbkeyrange
├── index.html
├── scripts
└── main.js
└── style
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # indexeddb-examples
2 | > NOTE: This example repository has been archived. The example code and the related "idbcursor", "idbindex", and "idbkeyrange" directories can now be found at [dom-examples/indexeddb-examples](https://github.com/mdn/dom-examples/tree/master/indexeddb-examples).
3 |
--------------------------------------------------------------------------------
/indexeddb-examples/idbcursor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Basic IDBCursor example — Rush studio albums 74-85
7 |
8 |
9 |
10 |
11 | Basic IDBCursor example — Rush studio albums 74-85
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/indexeddb-examples/idbcursor/scripts/main.js:
--------------------------------------------------------------------------------
1 | // create an instance of a db object for us to store the IDB data in
2 | var db;
3 |
4 | var records = [
5 | { albumTitle: 'Power windows', year: 1985 },
6 | { albumTitle: 'Grace under pressure', year: 1984 },
7 | { albumTitle: 'Signals', year: 1982 },
8 | { albumTitle: 'Moving pictures', year: 1981 },
9 | { albumTitle: 'Permanent waves', year: 1980 },
10 | { albumTitle: 'Hemispheres', year: 1978 },
11 | { albumTitle: 'A farewell to kings', year: 1977 },
12 | { albumTitle: '2112', year: 1976 },
13 | { albumTitle: 'Caress of steel', year: 1975 },
14 | { albumTitle: 'Fly by night', year: 1975 },
15 | { albumTitle: 'Rush', year: 1974 }
16 | ];
17 |
18 | // all the variables we need for the app
19 |
20 | var list = document.querySelector('ul');
21 | var advance = document.querySelector('.advance');
22 | var useContinue = document.querySelector('.continue');
23 | var useDelete = document.querySelector('.delete');
24 | var update = document.querySelector('.update');
25 | var changeDirection = document.querySelector('.direction');
26 |
27 |
28 | window.onload = function() {
29 | // In the following line, you should include the prefixes of implementations you want to test.
30 | window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
31 | // DON'T use "var indexedDB = ..." if you're not in a function.
32 | // Moreover, you may need references to some window.IDB* objects:
33 | window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
34 | window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
35 | // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
36 |
37 | var DBOpenRequest = window.indexedDB.open('albumLists', 1);
38 |
39 | DBOpenRequest.onsuccess = function(event) {
40 | db = DBOpenRequest.result;
41 | populateData();
42 | };
43 |
44 | DBOpenRequest.onupgradeneeded = function(event) {
45 | var db = event.target.result;
46 |
47 | db.onerror = function(event) {
48 | note.innerHTML += 'Error loading database.';
49 | };
50 |
51 | var objectStore = db.createObjectStore('rushAlbumList', { keyPath: 'albumTitle' });
52 | objectStore.createIndex('year', 'year', { unique: false });
53 | };
54 |
55 | function populateData() {
56 | var transaction = db.transaction(['rushAlbumList'], 'readwrite');
57 | var objectStore = transaction.objectStore('rushAlbumList');
58 | for(i = 0; i < records.length ; i++) {
59 | var request = objectStore.put(records[i]);
60 | };
61 |
62 | transaction.oncomplete = function() {
63 | displayData();
64 | };
65 | };
66 |
67 | useContinue.onclick = function() {
68 | displayData();
69 | }
70 |
71 | function displayData() {
72 | list.innerHTML = '';
73 | var transaction = db.transaction(['rushAlbumList'], 'readonly');
74 | var objectStore = transaction.objectStore('rushAlbumList');
75 |
76 | objectStore.openCursor().onsuccess = function(event) {
77 | var cursor = event.target.result;
78 | if(cursor) {
79 | var listItem = document.createElement('li');
80 | listItem.innerHTML = '' + cursor.value.albumTitle + ', ' + cursor.value.year;
81 | list.appendChild(listItem);
82 |
83 | //console.log(cursor.source);
84 | //console.log(cursor.key);
85 | //console.log(cursor.primaryKey);
86 | //console.log(cursor.value);
87 | cursor.continue();
88 | } else {
89 | console.log('Entries all displayed.');
90 |
91 | }
92 | };
93 |
94 | };
95 |
96 | advance.onclick = function() {
97 | advanceResult();
98 | };
99 |
100 | function advanceResult() {
101 | list.innerHTML = '';
102 | var transaction = db.transaction(['rushAlbumList'], 'readonly');
103 | var objectStore = transaction.objectStore('rushAlbumList');
104 |
105 | objectStore.openCursor().onsuccess = function(event) {
106 | var cursor = event.target.result;
107 | if(cursor) {
108 | var listItem = document.createElement('li');
109 | listItem.innerHTML = '' + cursor.value.albumTitle + ', ' + cursor.value.year;
110 | list.appendChild(listItem);
111 | cursor.advance(2);
112 | } else {
113 | console.log('Every other entry displayed.');
114 | }
115 | };
116 | };
117 |
118 | useDelete.onclick = function() {
119 | deleteResult();
120 | };
121 |
122 | function deleteResult() {
123 | list.innerHTML = '';
124 | var transaction = db.transaction(['rushAlbumList'], 'readwrite');
125 | var objectStore = transaction.objectStore('rushAlbumList');
126 |
127 | objectStore.openCursor().onsuccess = function(event) {
128 | var cursor = event.target.result;
129 | if(cursor) {
130 | if(cursor.value.albumTitle === 'Grace under pressure') {
131 | var request = cursor.delete();
132 | request.onsuccess = function() {
133 | console.log('Deleted that mediocre album from 1984. Even Power windows is better.');
134 | };
135 | } else {
136 | var listItem = document.createElement('li');
137 | listItem.innerHTML = '' + cursor.value.albumTitle + ', ' + cursor.value.year;
138 | list.appendChild(listItem);
139 | }
140 | cursor.continue();
141 | } else {
142 | console.log('Entries displayed.');
143 | }
144 | };
145 | };
146 |
147 | update.onclick = function() {
148 | updateResult();
149 | };
150 |
151 | function updateResult() {
152 | list.innerHTML = '';
153 | var transaction = db.transaction(['rushAlbumList'], 'readwrite');
154 | var objectStore = transaction.objectStore('rushAlbumList');
155 |
156 | objectStore.openCursor().onsuccess = function(event) {
157 | var cursor = event.target.result;
158 | if(cursor) {
159 | if(cursor.value.albumTitle === 'A farewell to kings') {
160 | var updateData = cursor.value;
161 |
162 | updateData.year = 2050;
163 | var request = cursor.update(updateData);
164 | request.onsuccess = function() {
165 | console.log('A better album year?');
166 | };
167 | };
168 |
169 | var listItem = document.createElement('li');
170 | listItem.innerHTML = '' + cursor.value.albumTitle + ', ' + cursor.value.year;
171 | list.appendChild(listItem);
172 |
173 | cursor.continue();
174 | } else {
175 | console.log('Entries displayed.');
176 | }
177 | };
178 | };
179 |
180 | changeDirection.onclick = function() {
181 | backwards();
182 | }
183 |
184 | function backwards() {
185 | list.innerHTML = '';
186 | var transaction = db.transaction(['rushAlbumList'], 'readonly');
187 | var objectStore = transaction.objectStore('rushAlbumList');
188 |
189 | objectStore.openCursor(null,'prev').onsuccess = function(event) {
190 | var cursor = event.target.result;
191 | if(cursor) {
192 | var listItem = document.createElement('li');
193 | listItem.innerHTML = '' + cursor.value.albumTitle + ', ' + cursor.value.year;
194 | list.appendChild(listItem);
195 |
196 | console.log(cursor.direction);
197 | cursor.continue();
198 | } else {
199 | console.log('Entries displayed backwards.');
200 |
201 | }
202 | };
203 |
204 | };
205 |
206 | };
207 |
208 |
--------------------------------------------------------------------------------
/indexeddb-examples/idbcursor/style/style.css:
--------------------------------------------------------------------------------
1 | /* || basic set up + sizing for containers */
2 |
3 | html, body {
4 | margin: 0;
5 | font-family: sans-serif;
6 | font-size: 10px;
7 | }
8 |
9 | html {
10 | background-color: rgb(200,30,30);
11 | }
12 |
13 | body {
14 | max-width: 800px;
15 | margin: 0 auto;
16 | padding: 30px 0;
17 | background: linear-gradient(to bottom, rgba(255,255,255,0.3),rgba(255,255,255,0));
18 | }
19 |
20 | h1 {
21 | text-align: center;
22 | font-size: 2.5rem;
23 | text-shadow: 2px 2px 5px rgb(150,30,30);
24 | }
25 |
26 | ul {
27 | text-align: center;
28 | list-style-type: none;
29 | }
30 |
31 | li {
32 | font-size: 2rem;
33 | padding-bottom: 1rem;
34 | color: rgb(255,255,255);
35 | }
36 |
37 | li strong {
38 | color: black;
39 | }
40 |
41 |
--------------------------------------------------------------------------------
/indexeddb-examples/idbindex/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Basic IDBIndex example — contacts directory
6 |
7 |
8 |
9 |
10 |
11 | Basic IDBIndex example — contacts directory
12 |
13 |
14 |
15 |
16 | | ID |
17 | Last name |
18 | First name |
19 | Job title |
20 | Company |
21 | E-mail |
22 | Phone |
23 | Age |
24 |
25 |
26 |
27 |
28 |
29 |
30 | Click/focus each table column heading to sort the data by that column.
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/indexeddb-examples/idbindex/scripts/main.js:
--------------------------------------------------------------------------------
1 | // create an instance of a db object for us to store the IDB data in
2 | var db;
3 |
4 | var activeIndex;
5 |
6 | var contacts = [
7 | { id: 1, fName: 'Brian', lName: 'Damage', jTitle: 'Master of Synergies', company: 'Acme', eMail: 'brian@acme.com', phone: '+441210000000', age: 37 },
8 | { id: 2, fName: 'Ted', lName: 'Maul', jTitle: 'Chief Reporter', company: 'Brass eye', eMail: 'ted@itsthenews.co.uk', phone: '+442081111111', age: 46 },
9 | { id: 3, fName: 'Mr', lName: 'Bungle', jTitle: 'Bad Clown', company: 'Stub a Dub', eMail: 'bungle@maiof.com', phone: '+1508888888', age: 50 },
10 | { id: 4, fName: 'Richard', lName: 'James', jTitle: 'Sound Engineer', company: 'Aphex Twin', eMail: 'richard@drukqs.com', phone: '+1517777777', age: 43 },
11 | { id: 5, fName: 'Brian', lName: 'Umlaut', jTitle: 'Shredmeister', company: 'Minions of metal', eMail: 'brian@raiseyourhorns.com', phone: '+14086666666', age: 40 },
12 | { id: 6, fName: 'Jonathan', lName: 'Crane', jTitle: 'Freelance Psychologist', company: 'Arkham', eMail: 'jon@arkham.com', phone: 'n/a', age: 38 },
13 | { id: 7, fName: 'Julian', lName: 'Day', jTitle: 'Schedule Keeper', company: 'Arkham', eMail: 'julian@arkham.com', phone: 'n/a', age: 43 },
14 | { id: 8, fName: 'Bolivar', lName: 'Trask', jTitle: 'Head of R&D', company: 'Trask', eMail: 'bolivar@trask.com', phone: '+14095555555', age: 55 },
15 | { id: 9, fName: 'Cloud', lName: 'Strife', jTitle: 'Weapons Instructor', company: 'Avalanche', eMail: 'cloud@avalanche.com', phone: '+17083333333', age: 24 },
16 | { id: 10, fName: 'Bilbo', lName: 'Bagshot', jTitle: 'Comic Shop Owner', company: 'Fantasy Bazaar', eMail: 'bilbo@fantasybazaar.co.uk', phone: '+12084444444', age: 43 }
17 | ];
18 |
19 | // all the variables we need for the app
20 |
21 | var tableEntry = document.querySelector('tbody');
22 |
23 |
24 | window.onload = function() {
25 | // In the following line, you should include the prefixes of implementations you want to test.
26 | window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
27 | // DON'T use "var indexedDB = ..." if you're not in a function.
28 | // Moreover, you may need references to some window.IDB* objects:
29 | window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
30 | window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
31 | // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
32 |
33 | var DBOpenRequest = window.indexedDB.open('contactsList', 1);
34 |
35 | DBOpenRequest.onsuccess = function(event) {
36 | db = DBOpenRequest.result;
37 | populateData();
38 | };
39 |
40 | DBOpenRequest.onupgradeneeded = function(event) {
41 | var db = event.target.result;
42 |
43 | db.onerror = function(event) {
44 | console.log('Error loading database.');
45 | };
46 |
47 | var objectStore = db.createObjectStore('contactsList', { keyPath: 'id' });
48 | objectStore.createIndex('lName', 'lName', { unique: false });
49 | objectStore.createIndex('fName', 'fName', { unique: false });
50 | objectStore.createIndex('jTitle', 'jTitle', { unique: false });
51 | objectStore.createIndex('company', 'company', { unique: false });
52 | objectStore.createIndex('eMail', 'eMail', { unique: true });
53 | objectStore.createIndex('phone', 'phone', { unique: false });
54 | objectStore.createIndex('age', 'age', { unique: false });
55 | };
56 |
57 | function populateData() {
58 | var transaction = db.transaction(['contactsList'], 'readwrite');
59 | var objectStore = transaction.objectStore('contactsList');
60 | for(i = 0; i < contacts.length ; i++) {
61 | var request = objectStore.put(contacts[i]);
62 | };
63 |
64 | transaction.oncomplete = function() {
65 | displayDataByKey();
66 | };
67 | };
68 |
69 | var thControls = document.querySelectorAll('th');
70 | for(i = 0; i < thControls.length; i++) {
71 | var activeThead = thControls[i];
72 | activeThead.onclick = function(e) {
73 | activeIndex = e.target.innerHTML;
74 | if(activeIndex == 'ID') {
75 | displayDataByKey();
76 | } else {
77 | if(activeIndex == "Last name") {
78 | displayDataByIndex('lName');
79 | } else if(activeIndex == "First name") {
80 | displayDataByIndex('fName');
81 | } else if(activeIndex == "Job title") {
82 | displayDataByIndex('jTitle');
83 | } else if(activeIndex == "Company") {
84 | displayDataByIndex('company');
85 | } else if(activeIndex == "E-mail") {
86 | displayDataByIndex('eMail');
87 | } else if(activeIndex == "Phone") {
88 | displayDataByIndex('phone');
89 | } else if(activeIndex == "Age") {
90 | displayDataByIndex('age');
91 | }
92 | }
93 | }
94 | }
95 |
96 | function displayDataByKey() {
97 | tableEntry.innerHTML = '';
98 | var transaction = db.transaction(['contactsList'], 'readonly');
99 | var objectStore = transaction.objectStore('contactsList');
100 |
101 | objectStore.openCursor().onsuccess = function(event) {
102 | var cursor = event.target.result;
103 | if(cursor) {
104 | var tableRow = document.createElement('tr');
105 | tableRow.innerHTML = '' + cursor.value.id + ' | '
106 | + '' + cursor.value.lName + ' | '
107 | + '' + cursor.value.fName + ' | '
108 | + '' + cursor.value.jTitle + ' | '
109 | + '' + cursor.value.company + ' | '
110 | + '' + cursor.value.eMail + ' | '
111 | + '' + cursor.value.phone + ' | '
112 | + '' + cursor.value.age + ' | ';
113 | tableEntry.appendChild(tableRow);
114 |
115 | cursor.continue();
116 | } else {
117 | console.log('Entries all displayed.');
118 | }
119 | };
120 | };
121 |
122 | function displayDataByIndex(activeIndex) {
123 | tableEntry.innerHTML = '';
124 | var transaction = db.transaction(['contactsList'], 'readonly');
125 | var objectStore = transaction.objectStore('contactsList');
126 |
127 |
128 | var myIndex = objectStore.index(activeIndex);
129 |
130 | console.log(myIndex.name);
131 | console.log(myIndex.objectStore);
132 | console.log(myIndex.keyPath);
133 | console.log(myIndex.multiEntry);
134 | console.log(myIndex.unique);
135 |
136 | var countRequest = myIndex.count();
137 | countRequest.onsuccess = function() {
138 | console.log(countRequest.result);
139 | }
140 |
141 | if(activeIndex == 'fName') {
142 | var getRequest = myIndex.get('Mr');
143 | getRequest.onsuccess = function() {
144 | console.log(getRequest.result);
145 | }
146 | }
147 |
148 | if(activeIndex == 'lName') {
149 | var getKeyRequest = myIndex.getKey('Bungle');
150 | getKeyRequest.onsuccess = function() {
151 | console.log(getKeyRequest.result);
152 | }
153 | }
154 |
155 | myIndex.openCursor().onsuccess = function(event) {
156 | var cursor = event.target.result;
157 | if(cursor) {
158 | var tableRow = document.createElement('tr');
159 | tableRow.innerHTML = '' + cursor.value.id + ' | '
160 | + '' + cursor.value.lName + ' | '
161 | + '' + cursor.value.fName + ' | '
162 | + '' + cursor.value.jTitle + ' | '
163 | + '' + cursor.value.company + ' | '
164 | + '' + cursor.value.eMail + ' | '
165 | + '' + cursor.value.phone + ' | '
166 | + '' + cursor.value.age + ' | ';
167 | tableEntry.appendChild(tableRow);
168 |
169 | cursor.continue();
170 | } else {
171 | console.log('Entries all displayed.');
172 | }
173 | };
174 | };
175 |
176 | };
177 |
178 |
--------------------------------------------------------------------------------
/indexeddb-examples/idbindex/style/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | margin: 0;
3 | font-family: 'Arvo', serif;
4 | font-size: 10px;
5 | }
6 |
7 | h1 {
8 | text-align: center;
9 | font-family: 'Bevan', cursive;
10 | font-size: 4rem;
11 | letter-spacing: 0.2rem;
12 | text-shadow: 1px 1px 1px #eee4fe,
13 | 2px 2px 1px #eee4fe,
14 | 3px 3px 1px #7b62ae,
15 | 4px 4px 1px #7b62ae,
16 | 5px 5px 1px #261758,
17 | 6px 6px 1px #261758;
18 | }
19 |
20 | table {
21 | width: 75%;
22 | font-size: 1.3rem;
23 | letter-spacing: 0.1rem;
24 | margin: 0 auto;
25 | border-collapse: collapse;
26 | box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
27 | }
28 |
29 | table,thead {
30 | background: white;
31 | }
32 |
33 | tbody {
34 | border: 1px solid #eee4fe;
35 | }
36 |
37 | thead {
38 | border: 1px solid #261758;
39 | }
40 |
41 | th {
42 | font-size: 1.7rem;
43 | padding: 1.2rem;
44 | text-align: left;
45 | background: linear-gradient(to bottom,#261758,#666778);
46 | color: white;
47 | text-shadow: 1px 1px 1px black;
48 | cursor: pointer;
49 | }
50 |
51 | th:hover, th:focus {
52 | color: #ddd;
53 | border: 0;
54 | }
55 |
56 | th:active {
57 | color: #bbb;
58 | }
59 |
60 | td {
61 | padding: 1rem;
62 | border-left: 1px solid #7b62ae;
63 | border-right: 1px solid #7b62ae;
64 | }
65 |
66 | td:first-child {
67 | border-left: none;
68 | }
69 |
70 | td:last-child {
71 | border-right: none;
72 | }
73 |
74 | tr:nth-child(even) {
75 | background: #eee4fe;
76 | }
77 |
78 | p {
79 | font-size: 1.5rem;
80 | text-align: center;
81 | }
--------------------------------------------------------------------------------
/indexeddb-examples/idbkeyrange/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Basic IDBKeyRange example — favourite things
7 |
8 |
9 |
10 |
11 | Basic IDBKeyRange example
These are a few of my favourite things
12 |
13 |
14 |
15 |
82 |
83 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/indexeddb-examples/idbkeyrange/scripts/main.js:
--------------------------------------------------------------------------------
1 | // create an instance of a db object for us to store the IDB data in
2 | var db;
3 |
4 | var things = [
5 | { fThing: 'Drum kit', fRating: 10 },
6 | { fThing: 'Family', fRating: 10 },
7 | { fThing: 'Batman', fRating: 9 },
8 | { fThing: 'Brass eye', fRating: 9 },
9 | { fThing: 'The web', fRating: 9 },
10 | { fThing: 'Mozilla', fRating: 9 },
11 | { fThing: 'Firefox OS', fRating: 9 },
12 | { fThing: 'Curry', fRating: 9 },
13 | { fThing: 'Paneer cheese', fRating: 8 },
14 | { fThing: 'Mexican food', fRating: 8 },
15 | { fThing: 'Chocolate', fRating: 7 },
16 | { fThing: 'Heavy metal', fRating: 10 },
17 | { fThing: 'Monty Python', fRating: 8 },
18 | { fThing: 'Aphex Twin', fRating: 8 },
19 | { fThing: 'Gaming', fRating: 7 },
20 | { fThing: 'Frank Zappa', fRating: 9 },
21 | { fThing: 'Open minds', fRating: 10 },
22 | { fThing: 'Hugs', fRating: 9 },
23 | { fThing: 'Ale', fRating: 9 },
24 | { fThing: 'Christmas', fRating: 8 },
25 | ];
26 |
27 | // all the variables we need for the app
28 |
29 | var list = document.querySelector('ul');
30 |
31 | var button = document.querySelector('button');
32 |
33 | var onlyText = document.querySelector('#onlytext');
34 | var rangeLowerText = document.querySelector('#rangelowertext');
35 | var rangeUpperText = document.querySelector('#rangeuppertext');
36 | var lowerBoundText = document.querySelector('#lowerboundtext');
37 | var upperBoundText = document.querySelector('#upperboundtext');
38 |
39 | window.onload = function() {
40 | // In the following line, you should include the prefixes of implementations you want to test.
41 | window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
42 | // DON'T use "var indexedDB = ..." if you're not in a function.
43 | // Moreover, you may need references to some window.IDB* objects:
44 | window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
45 | window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
46 | // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
47 |
48 | var DBOpenRequest = window.indexedDB.open('fThings', 1);
49 |
50 | DBOpenRequest.onsuccess = function(event) {
51 | db = DBOpenRequest.result;
52 | populateData();
53 | };
54 |
55 | DBOpenRequest.onupgradeneeded = function(event) {
56 | var db = event.target.result;
57 |
58 | db.onerror = function(event) {
59 | note.innerHTML += 'Error loading database.';
60 | };
61 |
62 | var objectStore = db.createObjectStore('fThings', { keyPath: 'fThing' });
63 | objectStore.createIndex('fRating', 'fRating', { unique: false });
64 | };
65 |
66 | function populateData() {
67 | var transaction = db.transaction(['fThings'], 'readwrite');
68 | var objectStore = transaction.objectStore('fThings');
69 | for(i = 0; i < things.length ; i++) {
70 | var request = objectStore.put(things[i]);
71 | };
72 |
73 | transaction.oncomplete = function() {
74 | displayData();
75 | };
76 | };
77 |
78 | var keyRangeValue = null;
79 |
80 | function displayData() {
81 | checkedValue = document.querySelector('input[name="value"]:checked').value;
82 | var filterIndex = document.querySelector('input[name="filterIndex"]:checked').value;
83 |
84 | if (filterIndex=="fThing") {
85 | if(checkedValue == "none") {
86 | keyRangeValue = null;
87 | } else if(checkedValue == "only") {
88 | keyRangeValue = IDBKeyRange.only(onlyText.value);
89 | } else if(checkedValue == "range") {
90 | keyRangeValue = IDBKeyRange.bound(rangeLowerText.value, rangeUpperText.value, false, false);
91 | } else if(checkedValue == "lower") {
92 | keyRangeValue = IDBKeyRange.lowerBound(lowerBoundText.value);
93 | } else if(checkedValue == "upper") {
94 | keyRangeValue = IDBKeyRange.upperBound(upperBoundText.value);
95 | }
96 | } else { //filterIndex=="fRating"
97 | if(checkedValue == "none") {
98 | keyRangeValue = null;
99 | } else if(checkedValue == "only") {
100 | keyRangeValue = IDBKeyRange.only(parseFloat(onlyText.value));
101 | } else if(checkedValue == "range") {
102 | keyRangeValue = IDBKeyRange.bound(parseFloat(rangeLowerText.value), parseFloat(rangeUpperText.value), false, false);
103 | } else if(checkedValue == "lower") {
104 | keyRangeValue = IDBKeyRange.lowerBound(parseFloat(lowerBoundText.value));
105 | } else if(checkedValue == "upper") {
106 | keyRangeValue = IDBKeyRange.upperBound(parseFloat(upperBoundText.value));
107 | }
108 | }
109 |
110 | if(keyRangeValue != null) {
111 | console.log(keyRangeValue.lower);
112 | console.log(keyRangeValue.upper);
113 | console.log(keyRangeValue.lowerOpen);
114 | console.log(keyRangeValue.upperOpen);
115 | };
116 |
117 | list.innerHTML = '';
118 | var transaction = db.transaction(['fThings'], 'readonly');
119 | var objectStore = transaction.objectStore('fThings');
120 |
121 | var countRequest = objectStore.count();
122 | countRequest.onsuccess = function() {
123 | console.log(countRequest.result);
124 | }
125 |
126 | //iterate over the fRating index instead of the object store:
127 | if (filterIndex=="fRating") {objectStore = objectStore.index("fRating");}
128 |
129 | objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
130 | var cursor = event.target.result;
131 | if(cursor) {
132 | var listItem = document.createElement('li');
133 | listItem.innerHTML = '' + cursor.value.fThing + ', ' + cursor.value.fRating;
134 | list.appendChild(listItem);
135 |
136 | cursor.continue();
137 | } else {
138 | console.log('Entries all displayed.');
139 |
140 | }
141 | };
142 |
143 | };
144 |
145 | button.onclick = function(e) {
146 | e.preventDefault();
147 |
148 | displayData();
149 | };
150 |
151 | };
--------------------------------------------------------------------------------
/indexeddb-examples/idbkeyrange/style/style.css:
--------------------------------------------------------------------------------
1 | /* || basic set up + sizing for containers */
2 |
3 | html, body {
4 | margin: 0;
5 | font-family: sans-serif;
6 | font-size: 10px;
7 | }
8 |
9 | html {
10 | background-color: #55aa55;
11 | }
12 |
13 | body {
14 | max-width: 800px;
15 | margin: 0 auto;
16 | padding: 30px 0;
17 | }
18 |
19 | h1 {
20 | text-align: center;
21 | font-size: 4rem;
22 | color: white;
23 | text-shadow: -1px -1px 2px black;
24 | }
25 |
26 | ul {
27 | text-align: center;
28 | list-style-type: none;
29 | padding: 2rem 1rem;
30 | background: white linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2));
31 | box-shadow: 3px 3px 10px black;
32 | }
33 |
34 | li {
35 | font-size: 2rem;
36 | padding-bottom: 1rem;
37 | }
38 |
39 | form {
40 | float: right;
41 | width: 55%;
42 | }
43 |
44 | ul {
45 | float: left;
46 | width: 40%;
47 | }
48 |
49 | form {
50 | font-size: 1.7rem;
51 | margin-top: 1rem;
52 | }
53 |
54 | form > div {
55 | margin-bottom: 3rem;
56 | padding: 1rem 1rem 2rem;
57 | background: white linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2));
58 | box-shadow: 3px 3px 10px black;
59 | }
60 |
61 | form div div {
62 | clear: both;
63 | margin-top: 1rem;
64 | }
65 |
66 | form div label {
67 | width: 55%;
68 | clear: both;
69 | }
70 |
71 | form div input {
72 | float: right;
73 | }
74 |
75 | form div input[type="text"] {
76 | width: 30%;
77 | }
78 |
79 | form div input[type="radio"] {
80 | margin-right: 10px;
81 | }
82 |
83 | button {
84 | display: block;
85 | width: 30%;
86 | margin: 0 auto;
87 | font-size: 1.7rem;
88 | line-height: 1.5;
89 | box-shadow: 1px 1px 2px black;
90 | }
--------------------------------------------------------------------------------