Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>IndexedDB getting data example 6</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, one on the email (unique) 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/Open CustomerDB database</button><p>
  
  <fieldset>
    SSN: <input type="text" id="ssn" placeholder="444-44-4444" required/><br>
  Name: <input type="text" id="name"/><br>
  Age: <input type="number" id="age" min="1" max="100"/><br>
  Email: <input type="email" id="email"/> reminder, email must be unique (we declared it as a "unique" index)<br>
       <button onclick="addACustomer();">Add a new
     Customer</button><button onclick="updateACustomer();">Update data about an existing
     Customer</button><br>
  </fieldset>
​
​
  
   <button onclick="removeACustomer();">Remove customer ssn=444-44-4444 (Bill)</button><br>
     <button onclick="searchACustomerShort();">Search customer (enter ssn in the form)</button><br>
  <button onclick="listAllCustomers();">List all customers</button><br>
  <button onclick="getCustomerByName();">Look for the first customer with name=Bill in the store using an index</button><br>
  <button onclick="getAllCustomersByName();">Look for all customers with name=Bill in the store using an index</button><br>
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
micbuffapro
0viewers