Solved

HTML5:  Add redord to indexeddb

Posted on 2014-11-24
3
151 Views
Last Modified: 2014-12-02
Hi All,


I have the following code snippet that creates an IndexedDB and adds three records.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var request = indexedDB.open("library");

request.onupgradeneeded = function() {
  // The database did not previously exist, so create object stores and indexes.
  var db = request.result;
  var store = db.createObjectStore("books", {keyPath: "isbn"});
  var titleIndex = store.createIndex("by_title", "title", {unique: true});
  var authorIndex = store.createIndex("by_author", "author");

  // Populate with initial data.
  store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
  store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
  store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});
};

request.onsuccess = function() {
  db = request.result;
};  

// <delete database>
//	window.indexedDB.deleteDatabase('library');
// </delete database>
</script>

Open in new window



This woirks well.  However I want to create another HTML page that adds to the existing records?

Any suggestions?
0
Comment
Question by:detox1978
  • 2
3 Comments
 
LVL 10

Expert Comment

by:Hans Langer
ID: 40463086
if your new page its in the same subdomain/domain then you can just use the same code and insert records.

just create the db and then insert data with something like:

db = indexedDB.open("library");

var tx = window.db.transaction(['books'],"readwrite").objectStore('books');      
tx.add(jsonObject,idrow);  

Open in new window

0
 
LVL 2

Author Comment

by:detox1978
ID: 40464035
Sorry I'm new to this.  Where do I add the the record data?


  // Populate with initial data.
  store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
  store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
  store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});

Open in new window

0
 
LVL 10

Accepted Solution

by:
Hans Langer earned 500 total points
ID: 40464756
just replace jsonObject with your object and the idrow with the ID that will make unique that row (like ISBN).

window.db = indexedDB.open("library"); //You can open the db and defined at the global scope so you can access to the db from any function without need to open it again. It will be opened until you close or refresh the page.

//This open a transaction to start operating in the "book" objectstore (its like a Table). 
var tx = window.db.transaction(['books'],"readwrite").objectStore('books');      

//Insert a row with your JSON data + the ID of the row
tx.add({title: "Quarry Memories", author: "Fred", isbn: 123456},123456);  

Open in new window


Success and Error listener are just necesary if you want to validate the data was inserted properly.

Look this article, its hows how to do it:
http://msdn.microsoft.com/en-us/library/ie/jj154909%28v=vs.85%29.aspx#writing_data_with_transactions
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Bootstrap question 4 26
arrays and radio buttons 10 36
Table doesn't show the lines! 3 23
Print a <div></div> only 5 33
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

713 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question