12.07.2015 Views

Pro JavaScript for Web Apps pdf - EBook Free Download

Pro JavaScript for Web Apps pdf - EBook Free Download

Pro JavaScript for Web Apps pdf - EBook Free Download

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

CHAPTER 6 STORING DATA IN THE BROWSER• Caution The function assigned to the onupgradeneeded property is the only opportunity you have to modify theschema of the database. If you try to add or delete an object store elsewhere, the browser will generate an error.Once the existing object stores are out of the way, I can create some new ones using thecreateObject store method. The arguments to this method are the name of the new store and anoptional object containing configuration settings to be applied to the new store. I have used the keyPathconfiguration option, which lets me set a default key <strong>for</strong> objects that are added to the store. I havespecified the id property as the key. I have also created an index using the createIndex method on thenewly created object store. An index allows me to per<strong>for</strong>m searches in the object store using a propertyother than the key, in this case, the category property. I’ll show you how to use an index shortly.Finally, I add objects to the data store. When I use this function in the main document, I’ll be usingthe data I get from an Ajax request <strong>for</strong> the products.json file. This is in the same <strong>for</strong>mat as the data I havebeen using throughout this book. I use the jQuery each function to enumerate each category and theitems it contains. I have added a category property to each item so that I can find all of the products thatbelong to the same category more easily.• Tip The objects you add to an object store are cloned using the HTML5 structured clone technique. This is amore comprehensive serialization technique than JSON, and the browser will generally manage to deal withcomplex objects, just as long as none of the properties is a function or DOM API object.Responding to the Success OutcomeThe second outcome I care about is success, which I handle by assigning a function to the onsuccessproperty of the request to open the database, as follows:req.onsuccess = function(e) {DBO.db = this.result;callback();};The first statement in this function assigns the opened database to the db property of the DBO object.This is just a convenient way to keep a handle on the database so that I can use it in other functions,something that I’ll demonstrate shortly.The second statement invokes the callback function that was passed as the second argument to thesetupDatabase function. It isn’t safe to assume that the database is open until the onsuccess function isexecuted, which means I need to have some mechanism <strong>for</strong> signaling the function caller that thedatabase has been successfully opened and data-related operations can be started.161www.it-ebooks.info

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!