YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Examples: Storage Utility: Advanced Storage Example

Storage Utility: Advanced Storage Example

This example has been deprecated and will no longer be supported. Please note that the SWF functionality of the Storage Utility requires that you host swfstore.swf on your own servers. YUI 2 is now in maintenance mode, so no future updates are planned and only critical fixes will be considered. For more information, please refer to the following blog posts:

This example shows how to get, set, and remove items from storage using the YUI Storage Utility and how to display the current storage contents in a DataTable.

Additional Options:

Advanced Storage Example

This example consists of two text fields, a few Buttons and a DataTable. The Buttons allow you to save data, set properties on your YAHOO.util.Storage instance, or clear all items from storage.

Once the page is drawn, initialize is called to instantiate a YAHOO.util.Storage instance and set up some listeners. We also disable all of the Buttons until the YAHOO.util.Storage instance is ready.

When storage is ready, it will dispatch a storage.CE_READY event. We can then enable the Buttons and initialize a DataTable with any previously stored values. Because items are stored as key/value pairs, we need to loop through them to turn them into name-value pairs suitable for use with the DataTable. The load function is called on page initialization and each time you switch engine options, creating or updating datatable as necessary.

The save Button is set up to take the values from the text fields and store them, using the setItem method of storage.

Similarly, a couple of other Buttons are set up to remove items from storage, either by name or index, or by clearing the entire local store.

We've already set up a listener for a storage.CE_CHANGE event, which is dispatched whenever an item is successfully added, updated, or deleted. That calls this function, which loops through the DataTable. Using the info property of the event, we can determine what type of change occurred, and either add rows to it, delete rows from it, or update its current values.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More Storage Utility Resources:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings