New local storage options in HTML5 are sure to improve the performance of any applications that run in browsers.
TL;DR: With HTML5, you can now store as much as 5MB of data locally in the browser, and decide whether or not the data should persist when the browser session ends. Here’s a rundown of the HTML5 Web Storage options for app developers, as well as a few pitfalls you’ll want to avoid.
After years of fits and starts, the W3C’s final recommendation for the HTML5 specification was released in October 2014. Perhaps the greatest impact HTML5 will have for app developers is local data storage. Toptal’s Demir Selmanovic points out in The 5 Most Common HTML5 Mistakes that Web Storage’s local data stores are not encrypted, which introduces a potential security risk.
On the plus side, Web Storage data never travels to web servers, so it is more secure than old-style cookies and Flash LBOs. However, HTML5’s localStorage and sessionStorage values are easy for bad guys to modify, so you should avoid storing security tokens locally.
HTML5 has already gone through several iterations of local storage, the simplest of which is JavaScript variables. According to Sitepoint’s Craig Buckler in HTML5 Browser Storage: The Past, Present and Future, you can store application data in a single global variable.
The simplest approach to local storage for application data in HTML5 is to use a single JavaScript global variable. Source: Sitepoint
Alternatively, values can be stored in the page DOM as node attributes or properties. This is particularly beneficial for widget-specific values, but doing so is riskier than using JavaScript variables because you can’t predict how your data will be interpreted by future browsers and other libraries.
Web Storage’s window.localStorage and code.sessionStorage objects have identical APIs and are used to retain persistent data and session-only data, respectively. Name/value pairs are used to store domain-specific strings, and up to 5MB of data can be stored locally, none of which ever travels to the server.
HTML5’s window.localStorage object allows local data to persist after the browser session is closed. Source: Sitepoint
Web Storage supports only string values, and it’s unstructured, so it doesn’t allow transactions, indexing, or searching. Conversely, IndexedDB’s data store is structured, transactional, and more like NoSQL in terms of performance. Its synchronous and asynchronous API makes possible more robust client-side data storage and access, although the API’s size and complexity make creating an IndexedDB polyfill a challenge.
File API enhancements facilitate local file access
When users interact with files in their browsers, the many back-and-forth trips between the client and server can be frustrating — to users and developers alike. HTML5’s File API lets users access and alter files in the browser with much less interaction with the server.
In an October 29, 2014, tutorial on Scotch.io, Spencer Cooley describes how to allow browser users to select one or more image files using JavaScript, and then display the file without requiring a call to the server.
HTML5 allows you to access an image file in your browser without having to communicate with the server. Source: Scotch.io
After accessing the FileList object, you render the file in the browser by loading one of the file objects into FileReader to generate a local URL that serves as the src in an image element.
Load a file object into FileReader to create a local URL to use as the src image element. Source: Scotch.io
The simplest way to manage your databases in a browser is by using the new Morpheus Virtual Appliance, which provides a single dashboard for provisioning, deploying, and monitoring your heterogeneous MySQL, MongoDB, Redis, and ElasticSearch databases. Morpheus offers a simple point-and-click interface for analyzing SQL, NoSQL, and in-memory databases across hybrid clouds in just minutes. Each database instance you create includes a free full replica set for built-in fault tolerance and fail over.
With the Morpheus database-as-a-service (DBaaS), you can migrate existing databases from a private cloud to the public cloud, or from public to private. A new instance of the same database type is created in the other cloud, and real-time replication keeps the two databases in sync. Visit the Morpheus site for pricing information and to create a free account.
