Basic example IndexedDB

From: https://msdn.microsoft.com/en-us/library/hh779017(v=vs.85).aspx

by sonylnagale

HTML

<title>
  Saving Files via IndexedDB</title>


<h1>Saving Files via IndexedDB</h1>
<div>
  <button id="openButton">Create/Open DB</button>
  <!-- Clicking this opens the database. If there's no database to open, a database is created. -->
  <button id="populateButton">Populate DB</button>
  <button id="displayButton">Display DB</button>
  <button id="deleteButton">Delete DB</button>
</div>
<div id="messages">
  <p>If the database does not exist, clicking <strong>Create/Open DB</strong> creates it. If the database already exists, clicking <strong>Create/Open DB</strong> opens it.</p>
  <p>Thus, you must click the <strong>Create/Open DB</strong> button before clicking the <strong>Populate DB</strong> button.</p>
</div>
<p>
  <input type="file" id="fileSelector" multiple size="24">
  <!-- Only display this element when the database is ready. -->
</p>

CSS

html {
  padding: 0;
  margin: 0;
}

body {
  padding: 0 0 0 2em;
  margin: 0;
}

button {
  margin-right: 1em;
  box-shadow: 2px 2px 8px #306;
  /* Purple box shadow. */
}

#messages {
  border: 1px black solid;
  width: 25.35em;
  margin-top: 1em;
  padding: 0 1em;
}

#fileSelector {
  display: none;
  width: 33em;
}

#varSelector {
  display: none;
  width: 33em;
}

JavaScript

var dbGlobals = {}; // Store all indexedDB related objects in a global object called "dbGlobals".
dbGlobals.db = null; // The database object will eventually be stored here.    
dbGlobals.description = "This database is used to store files locally."; // The description of the database.
dbGlobals.name = "localFileStorage"; // The name of the database.
dbGlobals.version = 1; // Must be >= 1. Be aware that a database of a given name may only have one version at a time, on the client machine.     
dbGlobals.storeName = "fileObjects"; // The name of the database's object store. Each object in the object store is a file object.
dbGlobals.message = ""; // When useful, contains one or more HTML strings to display to the user in the 'messages' DIV box.
dbGlobals.empty = true; // Indicates whether or not there's one or more records in the database object store. The object store is initially empty, so set this to true.

// ---------------------------------------------------------------------------------------------------

function requiredFeaturesSupported() {
  switch (window.location.protocol) { // To work, IndexedDB pages must be served via the http or https protocol (or, for apps in the new Windows UI, the ms-wwa or ms-wwa-web protocols).
    case "http:":
      break;
    case "https:":
      break;
    case "ms-wwa-web:": // For apps in the new Windows UI, IndexedDB works in local content loaded in the web context.
      break;
    case "ms-wwa:": // For apps in the new Windows UI, IndexedDB works in the local context.
      break;
    default:
      document.getElementById('bodyElement').innerHTML = "<h3>IndexedDB pages must be served via the http:// or https:// protocol - resolve this issue and try again.</h3>";
      return false;
  } // switch

  if (!document.getElementById('fileSelector').files) {
    document.getElementById('bodyElement').innerHTML = "<h3>File API is not fully supported - upgrade your browser to the latest version.</h3>";
    return false;
 ...