HTML5 Video Tutorial: Storing Data With IndexedDB
»
HTML5 Video Tutorial: Storing Data With IndexedDB
Posted on Apr 21, 2011
(2 years ago).
Seen 4,124 times.
5 comments.
Member since Sep 29, 2010
Location: San Francisco
Stream Posts: 284
Location: San Francisco
Stream Posts: 284
In this tutorial, Laurent Tonon is going to show you how to build a basic sticky note application that will take advantage of the HTML5 feature, IndexedDB, to store data in browser.
You are going to build this application with HTML5, JavaScript, and a little bit of jQuery. By the end of this tutorial you should have a feel for how to store, retrieve, and delete data with IndexedDB.
You can download the project files for the HTML5 IndexedDB tutorial here
Want to learn more about HTML5 development?
Check out more of our videos and training courses.
You are going to build this application with HTML5, JavaScript, and a little bit of jQuery. By the end of this tutorial you should have a feel for how to store, retrieve, and delete data with IndexedDB.
You can download the project files for the HTML5 IndexedDB tutorial here
Want to learn more about HTML5 development?
Check out more of our videos and training courses.
Comments
Posted on Apr 25, 2011
Chre Lad
Self
Member since Apr 25, 2011
To get this working in the latest version of Chromium, you can apply the following gist: https://gist.github.com/941298. Not much needs to be changed, you only need to change/add some prefixes. Thanks again for the great tutorial and very in depth video describing how you accomplished this.
Posted on Apr 25, 2011
Laurent TononSoftware Developer
Marakana, Inc.
Member since Apr 9, 2010
Location: San Francisco
Location: San Francisco
Thanks for sharing Chre! I'll check how you did it as soon as I can
Cheers!
Cheers!
Posted on Jul 16, 2011
Daniel Cher
Wild Iris Consulting
Member since Jul 16, 2011
Laurent, this is very cool and helpful. I'm wondering whether IndexedDB will work if the file is loaded not via HTTP but via file://, as in file:///C:/xampp/htdocs/idbexample/index.html. I get an error "operation failed for reasons unrelated to the database..." on script.js line 6:
var request = window.mozIndexedDB.open("stickynotes", "This database contains our sticky notes");
It seems to me that one of the best aspects of indexedDB is that it can be used to store data when the user is offline. When the user is offline, the user would not be loading a web page via HTTP but rather directly from the file system (i.e., double click on the file). Any thoughts appreciated.
Daniel
var request = window.mozIndexedDB.open("stickynotes", "This database contains our sticky notes");
It seems to me that one of the best aspects of indexedDB is that it can be used to store data when the user is offline. When the user is offline, the user would not be loading a web page via HTTP but rather directly from the file system (i.e., double click on the file). Any thoughts appreciated.
Daniel
Posted on Jul 17, 2011
Laurent TononSoftware Developer
Marakana, Inc.
Member since Apr 9, 2010
Location: San Francisco
Location: San Francisco
Hi Daniel,
"Offline" with HTML5 means that if the user is not connected to the internet and tries to access the web application, the application is still accessed from the http or https scheme.
But yes, you need to run the application from a server :)
Cheers!
Laurent
"Offline" with HTML5 means that if the user is not connected to the internet and tries to access the web application, the application is still accessed from the http or https scheme.
But yes, you need to run the application from a server :)
Cheers!
Laurent
Posted on Nov 24, 2011
Mathieu D
Member since Nov 24, 2011
Hello! Why do you use the READ_WRITE mode in the "getAllNotes" method instead of READ_ONLY mode ?
Second question, tutorials demonstrate how to get all the records and iterate over them with the cursor. But how would I get a record with a specific key? Thank you
Second question, tutorials demonstrate how to get all the records and iterate over them with the cursor. But how would I get a record with a specific key? Thank you
