HTML5 Game - Store data in indexedDB

Description

Store data in indexedDB
Demo

<!DOCTYPE html>
<html lang="en">

  <script>
let database;/*from ww w.j av a2  s  .  c om*/

window.onload = function () {
  let request = window.indexedDB.open("LinksDB2", 1);

  request.onsuccess = function(event) {
    console.log("Created or opened database successfully.");
    database = request.result;
    showLinks();
  };

  request.onerror = function (event) {
    console.log(request.error + " occurred.");
  };

  request.onupgradeneeded = function(event) {
    console.log("About to set up DB for the first time or upgrade it.");
    console.log("Database changing from " + event.oldVersion + " to " + event.newVersion);
    
    let db = request.result;    
    let objectStore = db.createObjectStore("Links", { keyPath: "url" });    
  }
};

function addLink() {  
  let name = document.getElementById("name").value;
  let url = document.getElementById("url").value;
  let description = document.getElementById("description").value;
  let notes = document.getElementById("notes").value;
  
  let linkRecord = new LinkRecord(name, url, description, notes);
  console.log("Prepared LinkRecord object for " + linkRecord.name);
  
  let transaction = database.transaction(["Links"], "readwrite");
  let objectStore = transaction.objectStore("Links");

  let request = objectStore.put(linkRecord);
  request.onerror = function(event) {
    console.log(request.error + " occurred.");
  };

  request.onsuccess = function(event) {
    console.log("Successfully added link.");
    showLinks();
  };  
}

function showLinks() {
  console.log("About to refresh link list.");

  let transaction = database.transaction(["Links"], "readonly");
  let objectStore = transaction.objectStore("Links");

  let request = objectStore.openCursor();
  
  request.onerror = function (event) {
    console.log(request.error + " occurred.");
  };
  let markupToInsert = "";

  request.onsuccess = function (event) {    
    let cursor = event.target.result;
    if (cursor) {
      let linkRecord = cursor.value;
      markupToInsert += "<a href=" + linkRecord.url + ">" + linkRecord.name + "</a> (" +
        "<span class='linkButton' data-url='" + linkRecord.url + "' onclick='getLinkDetails(this)'>Details</span>" + " " +
        "<span class='linkButton' data-url='" + linkRecord.url + "' onclick='deleteLink(this)'>Delete</span>" +
        ")<br>";
      cursor.continue();
    }
    else {
      if (markupToInsert == "") {
        markupToInsert = "<< No links. >>";
      }
      else {
        markupToInsert = "<i>Links you've added so far: </i><br>" + markupToInsert;
      }
      let resultsElement = document.getElementById("links");
      resultsElement.innerHTML = markupToInsert;

    }
  };
}

function getLinkDetails(element) {
  let url = element.getAttribute("data-url");
  console.log("About to get details for " + url);
    
  let transaction = database.transaction(["Links"], "readonly");
  let objectStore = transaction.objectStore("Links");
    
  let request = objectStore.get(url);

  request.onerror = function(event) {
    console.log(request.error + " occurred.");
  }

  request.onsuccess = function(event) {
    console.log("Found matching record.");
    let linkRecord = request.result;

    let resultsElement = document.getElementById("linkDetails");
    resultsElement.innerHTML = "<b>" + linkRecord.name + "</b><br>" +
      "<b>URL:</b> " + linkRecord.url + "<br>" +
      "<b>Description:</b> " + linkRecord.description + "<br>" +
      "<b>Notes:</b> " + linkRecord.notes;
  }
}

function deleteLink(element) {
  let url = element.getAttribute("data-url");
  console.log("About to delete " + url);

  let transaction = database.transaction(["Links"], "readwrite");
  let objectStore = transaction.objectStore("Links");

  let request = objectStore.delete(url);

  request.onerror = function (event) {
    console.log(request.error + " occurred.");
  };

  request.onsuccess = function (event) {
    console.log("Deleted record.");
    showLinks();
  }  
}

function LinkRecord(name, url, description, notes) {
  this.name = name;
  this.url = url;
  this.description = description;
  this.notes = notes;
}
    </script>
</head>

<body>
<form action="#">
  <fieldset>
    <legend>Contact Details</legend>
      <label for="name">Name of the site:</label>
      <input id="name" placeholder="Some website"><br>
      <label for="url">URL (web address):</label>
      <input id="url" placeholder="http://somesite.somedomain.com"><br>
      <label for="Description">Description:</label>
      <input id="description" placeholder="A site about something"><br>
      <label for="Notes">Why you like it:</label>
      <textarea id="notes" placeholder="It has secret tricks for HTML5 ninjas."></textarea><br>
  </fieldset>
  <div><input type="button" value="Add Link" onclick="addLink()">
  <input type="button" value="Show Links" onclick="showLinks()"></div>
</form>

<div class="resultBox" id="links">
  &nbsp;
</div>

<div class="resultBox" id="linkDetails">
  &nbsp;
</div>

</body>
</html>
HTML5 Game - Store data in indexedDB

Description

Demo

Related Topics
