YUI 2.8 came out last week while I was on vacation. There are many improvements, including a Storage Utility (by me) that allows developers to store large amounts of textual data client-side, regardless of whether the browser supports the proposed HTML 5 specification or not. The package does this by using one of three storage engines (HTML 5, Google Gears, or SWF), although each engine has its own limitations (see documentation). However, all engines implement the same Storage model, so they have the identical interface, regardless of their actual implementation.

Here is a visualization that describes how it works:

Example 1: Diagram of Storage Utility

Example 1 shows the 3 main parts of the Storage Utility: StorageManager, Storage engines, and StorageEvent. A developers asks StorageManager for an a StorageEngine, which they can use once the ON_READY event fires. The developer can configure which engine is returned by StorageManager and some engine specific properties (see documentation), otherwise the first available engine will be returned. As the developer adds, updates, or removes key/value pairs from the engine, the CE_CHANGE event is fired, which passes a StorageEvent object to the callback function.

Each storage engine extends the Storage object. Looking into the Storage object source code, you will see that there are many public and protected functions that mirror each other. The developer will interact with the public function which handles basic validation, applies any necessary meta information, then calls the protected function which is overridden by the engine implementation and will actually interact with the underlying engine. This provides the most flexibility for writing your own engines, as each engine need only extend Storage and implement the protected functions, without having to worrying about common validation. After defining an engine, simply call the register function of StorageManager and it will be added to the list of available engines.

The Storage Utility also has some improvements over the HTML 5 specification as it can accept and return Boolean and Number objects as well as String by using meta information. Also, if you are confident that your end-users support multiple engine types, you can use as many engines as you want to maximize the available storage space. Next article will walk through how to write your own engine.

Quick Note

The new design is coming along quickly. I am in the process of converting all the old articles, and expect to have a working version uploaded soon.