Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add IndexedDB API Sample #6

Merged
merged 3 commits into from
Aug 16, 2013
Merged

Add IndexedDB API Sample #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1fc7d90
Create IndexedDB
sinhyeok-seo Aug 16, 2013
5b9f38d
Delete IndexedDB
sinhyeok-seo Aug 16, 2013
b72c626
Add IndexedDB API Sample
Aug 16, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions IndexedDB/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>IndexedDB API Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
window.onload = function(){
app.createStore();
}
</script>
</head>
<body>
<h1>IndexedDB API Sample</h1>

<p>
<button onclick="app.initDB()">Init DB</button>
<br />

<button onclick="app.testWrite()">Add Hanna</button>
<br />

<button onclick="app.testRemove()">Remove Hanna</button>
<br />

<button onclick="app.testRead()">Get 555-55-5555</button>
<br />

<button onclick="app.findValueWithIndex()">Get Donna's SSN</button>
<br />

<button onclick="app.testGetAllWithCursor()">Get All Using Cursor</button>
<br />

<button onclick="app.testGetAllWithIndexCursor()">Get All Using Index-Cursor</button>
<br />

<button onclick="app.testGetAllWithIndexKeyCursor()">Get All Using Index-KeyCursor</button>
<br />

<button onclick="app.testClear(true)">Clear DB</button>
<br />
</p>
</body>
</html>
182 changes: 182 additions & 0 deletions IndexedDB/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
var app = function(){
var db;

const customerData = [
{ ssn: "444-44-4444", name: "Bill", age: 35, email: "[email protected]" },
{ ssn: "555-55-5555", name: "Donna", age: 32, email: "[email protected]" }
];
return {
createStore: function(){
var request = indexedDB.open("MyTestDatabase", 1);
request.onerror = function(event) {
alert("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = function(event) {
db = request.result;
console.log("IndexedDB Opened.");
};

request.onupgradeneeded = function(event) {
var db = event.target.result;

// Create an objectStore to hold information about our customers. We're
// going to use "ssn" as our key path because it's guaranteed to be
// unique.
var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

// Create an index to search customers by name. We may have duplicates
// so we can't use a unique index.
objectStore.createIndex("name", "name", { unique: false });

// Create an index to search customers by email. We want to ensure that
// no two customers have the same email, so use a unique index.
objectStore.createIndex("email", "email", { unique: true });

// Store values in the newly created objectStore.
for (var i in customerData) {
objectStore.add(customerData[i]);
}
};
},

initDB: function() {
app.testClear(false);

var transaction = db.transaction(["customers"], "readwrite");

transaction.oncomplete = function(event) {
alert("Init Done.");
};

transaction.onerror = function(event) {
alert("Failed.");
};

var objectStore = transaction.objectStore("customers");

for (var i in customerData) {
var req = objectStore.add(customerData[i]);
req.onsuccess = function(event) {
// event.target.result == customerData[i].ssn;
};
};
},

testWrite: function (){
var transaction = db.transaction(["customers"], "readwrite");

transaction.oncomplete = function(event) {
alert("Done.");
};

transaction.onerror = function(event) {
alert("Failed.");
};

var objectStore = transaction.objectStore("customers");
var newCustomers = [
{ ssn: "666-66-6666", name: "Hanna", age: 32, email: "[email protected]" }
];

for (var i in newCustomers) {
var request = objectStore.add(newCustomers[i]);
request.onsuccess = function(event) {
// event.target.result == customerData[i].ssn;
};
};
},

testRemove: function (){
console.log("testRemove() called");

var request = db.transaction(["customers"], "readwrite")
.objectStore("customers")
.delete("666-66-6666");
request.onsuccess = function(event) {
alert("Removed.");
};
request.onerror = function(event) {
alert("Failed.");
};
},

testRead: function (){
var transaction = db.transaction(["customers"]);
var objectStore = transaction.objectStore("customers");
var request = objectStore.get("555-55-5555");
request.onerror = function(event) {
// Handle errors!
};
request.onsuccess = function(event) {
// Do something with the request.result!
alert("Name for SSN 555-55-5555 is " + request.result.name);
};
},

testGetAllWithCursor: function (){
var objectStore = db.transaction("customers").objectStore("customers");

objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
cursor.continue();
}
else {
alert("No more entries!");
}
};
},

findValueWithIndex: function() {
var objectStore = db.transaction("customers").objectStore("customers");

var index = objectStore.index("name");
index.get("Donna").onsuccess = function(event) {
alert("Donna's SSN is " + event.target.result.ssn);
};
},

testGetAllWithIndexCursor: function() {
var objectStore = db.transaction("customers").objectStore("customers");

var index = objectStore.index("name");
index.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
// cursor.key is a name, like "Bill", and cursor.value is the whole object.
alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
cursor.continue();
}
};
},

testGetAllWithIndexKeyCursor: function() {
var objectStore = db.transaction("customers").objectStore("customers");

var index = objectStore.index("name");
index.openKeyCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
// cursor.key is a name, like "Bill", and cursor.value is the SSN.
// No way to directly get the rest of the stored object.
alert("Name: " + cursor.key + ", SSN: " + cursor.value);
cursor.continue();
}
};
},

testClear: function (showAlert){
var objectStore = db.transaction("customers", "readwrite").objectStore("customers");
var req = objectStore.clear();
req.onsuccess = function(evt) {
if (showAlert == true) alert("Store cleared");
};
req.onerror = function (evt) {
if (showAlert == true) alert("clearObjectStore:", evt.target.errorCode);
};
}
} //-- return
}();

window.$ = app.$;
14 changes: 14 additions & 0 deletions IndexedDB/manifest.webapp
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"version": "0.1",
"name": "IndexedDB",
"description": "IndexedDB API Sample App",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/icon-16.png",
"48": "/img/icons/icon-48.png",
"128": "/img/icons/icon-128.png"
},
"installs_allowed_from": ["*"],
"appcache_path": "/cache.manifest",
"default_locale": "en"
}