Data goes around in applications, but, eventually, new and modified data has to be stored; this can be done on the client or server. In the previous chapters, we used local storage (also called web storage) in the browser. Here, we will investigate a better client-side storage mechanism called IndexedDB and a layer called Lawndart that automatically chooses the best local storage mechanism available on the client. Most of the time, the data needs to be available to many people, so it needs to be stored centrally on a server. We will see how to communicate data between the client and server with JSON and, in the next chapter, how to store this data in a database on the server-side. Then, we'll see that Dart can be used for both sides of a client-server app. To do this, we need to learn how Dart works with asynchronous calls using the Future objects and how it can run as a web server. The following are the topics for this chapter:
- What are the options for browser storage?
- Asynchronous calls and
Futureobjects - How to use IndexedDB with Dart
- Using Lawndart
- A Dart web server
- Using JSON web services
Using client-side data storage reduces bandwidth traffic, decreases network response times (latency), increases UI performance, and, best of all, allows your application to run offline. The local storage mechanism that we've used until now is a very simple key/value store and does have good cross-browser coverage. However, it can only store strings and is a blocking (synchronous) API; this means that it can temporarily stop your web page from responding while it is doing its job. This can be bad for performance when your app wants to store or read large amounts of data, such as images. Moreover, it has a space limit of 5 Mb (this varies with the browsers); you can't detect when you are nearing this limit and you can't ask for more space! These properties make it only as useful as a temporary data storage tool—better than cookies, but not suited for a reliable database kind of storage.
On the other hand, IndexedDB is the future of offline, local object storage for your web app. It has all the advantages of a local storage, but no size limit. It is a database which comprises a lot of functionality; however, being an indexed object store, it belongs to the family of NoSQL databases (similar to MongoDB and CouchDB on the server). It is on the track to becoming an official standard and it does have Chrome, Firefox, and Internet Explorer (a version greater than or similar to 10) implementations. Using indexes, it provides a far better search performance than web storage, but programming it is more complex (the equivalent of relational database storage in the browser also exists and is called Web SQL DB. However, its specification is no longer maintained and Firefox and Internet Explorer do not support it. This is why we won't discuss it here). IndexedDB works in a non-blocking way for our app and, before we dive into how to use it, we will explore Dart's mechanism to program non-blocking codes called the Future objects.