Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>IndexedDB example 1</title>
</head>
<body>
  This example proposes only one single JavaScript function for:
  <ul>
    <li>Creating a Database, for storing customers (a customer has a social security number (property "ssn"), a name, an age and an email)</li>
    <li>Creating an object store in that dataBase,</li>
    <li>Specifying a keyPath (a property in the objects stored that will act as a Primary Key, in our case the social security number),</li>
    <li>Adding two indexes for faster retrievals (one on the name, on on the email property of each object),</li>
    <li>Populating the dataBase with three entries.</li>
  </ul>
  <p>Press the following button for calling the createDatabase() JavaScript function. Then look at the debugging console (with Chrome: F12 + Resources tab)</p>
  <button onclick="createDatabase();">Create CustomerDB database</button>
  
</body>
</html>
 
function createDatabase() {
  
  if (!window.indexedDB) {
    window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}
  
// This is what our customer data looks like.
var customerData = [
  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];
var dbName = "CustomerDB";
 
// Open database with version=2. Use integer valueonly ! Not 1.1, 1.2 etc.
var request = indexedDB.open(dbName, 2);
 
request.onerror = function(event) {
  // Handle errors.
  console.log("request.onerror errcode=" + event.target.error.name);
};
request.onupgradeneeded = function(event) {
  console.log("request.onupgradeneeded, we are creating a new version of the dataBase");
  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]);
  }
};
  
  request.onsuccess = function(event) {
  console.log("request.onsuccess, database opened, now we can add / remove / look for data in it!");
    // The result is the database itself
  var db = event.target.result;  
};
 
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers