Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>IndexedDB</title>
- <script type="text/javascript">
- var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
- var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
- var db;
- (function () {
- var peopleData = [
- { name: "John Dow", email: "john@company.com" },
- { name: "Don Dow", email: "don@company.com" }
- ];
- function initDb() {
- var request = indexedDB.open("PeopleDB", 1);
- request.onsuccess = function (evt) {
- db = request.result;
- };
- request.onerror = function (evt) {
- console.log("IndexedDB error: " + evt.target.errorCode);
- };
- request.onupgradeneeded = function (evt) {
- var objectStore = evt.currentTarget.result.createObjectStore(
- "people", { keyPath: "id", autoIncrement: true });
- objectStore.createIndex("name", "name", { unique: false });
- objectStore.createIndex("email", "email", { unique: true });
- for (i in peopleData) {
- objectStore.add(peopleData[i]);
- }
- };
- }
- function contentLoaded() {
- initDb();
- var btnAdd = document.getElementById("btnAdd");
- var btnDelete = document.getElementById("btnDelete");
- var btnPrint = document.getElementById("btnPrint");
- btnAdd.addEventListener("click", function () {
- var name = document.getElementById("txtName").value;
- var email = document.getElementById("txtEmail").value;
- var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
- var objectStore = transaction.objectStore("people");
- var request = objectStore.add({ name: name, email: email });
- request.onsuccess = function (evt) {
- // do something after the add succeeded
- };
- }, false);
- btnDelete.addEventListener("click", function () {
- var value = document.getElementById("txtID").value;
- var id = parseInt(value);
- var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
- var objectStore = transaction.objectStore("people");
- var request = objectStore.delete(id);
- request.onsuccess = function(evt) {
- console.log('deleted ' + evt.target.result);
- };
- request.onerror = function(evt) {
- console.log('fail deleting ' + id);
- console.log(evt);
- };
- }, false);
- btnPrint.addEventListener("click", function () {
- var output = document.getElementById("printOutput");
- output.textContent = "";
- var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
- var objectStore = transaction.objectStore("people");
- var request = objectStore.openCursor();
- request.onsuccess = function(evt) {
- var cursor = evt.target.result;
- if (cursor) {
- output.textContent += "id: " + cursor.key +
- " is " + cursor.value.name + " ";
- cursor.continue();
- }
- else {
- console.log("No more entries!");
- }
- };
- }, false);
- }
- window.addEventListener("DOMContentLoaded", contentLoaded, false);
- })();
- </script>
- </head>
- <body>
- <div id="container">
- <label for="txtName">
- Name:
- </label>
- <input type="text" id="txtName" name="txtName" />
- <br />
- <label for="txtEmail">
- Email:
- </label>
- <input type="email" id="txtEmail" name="txtEmail" />
- <br />
- <input type="button" id="btnAdd" value="Add Record" />
- <br />
- <label for="txtID">
- ID:
- </label>
- <input type="text" id="txtID" name="txtID" />
- <br />
- <input type="button" id="btnDelete" value="Delete Record" />
- <br />
- <input type="button" id="btnPrint" value="Print objectStore" />
- <br />
- <output id="printOutput">
- </output>
- </div>
- <script type="text/javascript" src="../../jsc/dev-ydn.db-0.29.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement