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.