Solved

HTML5:  Add redord to indexeddb

Posted on 2014-11-24
3
145 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now