StorageUI

A javascript library that enables a simple viewer and editor for localStorage data.

It makes it easy to give your site a quick way to copy local storage from one browser to another.

It doesn't modify localStorage, that's up to you via triggered events.

It depends on Msg to display the modal windows.


Get the code here

To install, include these files:
<script src='msg.js'></script>
 
<script src='storageui.js'></script>

Click here for a Demo

Demo Code: 
var stor = StorageUI(
{
    items:
    [
        {
            name: "Options",
            ls_name: "options_v1",
            on_save: function(item)
            {
                localStorage.setItem(item.ls_name, item.value);
                alert(item.ls_name + ' was modified!');
            },
            on_reset: function(item)
            {
                localStorage.setItem(item.ls_name, JSON.stringify({version:item.ls_name}));
                alert(item.ls_name + ' was resetted!');
            },
            on_copied: function(item)
            {
                alert(item.name + ' was copied!');
            }
        },
        {
            name: "Programs",
            ls_name: "programs_v1",
            on_save: function(item)
            {
                localStorage.setItem(item.ls_name, item.value);
                alert(item.ls_name + ' was modified!');
            },
            on_reset: function(item)
            {
                localStorage.setItem(item.ls_name, JSON.stringify({version:item.ls_name}));
                alert(item.ls_name + ' was resetted!');
            },
            on_copied: function(item)
            {
                alert(item.name + ' was copied!');
            }
        },
        {
            name: "Save History",
            ls_name: "saved_v1",
            on_save: function(item)
            {
                localStorage.setItem(item.ls_name, item.value);
                alert(item.ls_name + ' was modified!');
            },
            on_reset: function(item)
            {
                localStorage.setItem(item.ls_name, JSON.stringify({version:item.ls_name}));
                alert(item.ls_name + ' was resetted!');
            },
            on_copied: function(item)
            {
                alert(item.name + ' was copied!');
            }
        }
    ],
    msg: Msg.factory({class:"blue"}),
    after_reset: function(list)
    {
        alert('All reset events were fired. Check the console.');
        console.log(list);
    }
});

stor.menu();

Item Options

To create an instance you pass it an object as you can see in the example above.

Each object has a list of items. Each item has the following properties:

name (string): The displayed name of the localStorage object.

ls_name (string): The internal name of the localStorage object to be retreived.

on_save (function) [default: Empty Function]: What to do when "Save Modification" was clicked. It receives an item, with "name", "ls_name" and "value" (value of the textarea).

on_reset (function) [default: Empty Function]: What to do when the object was selected to be resetted. It receives an item, with "name" and "ls_name".

on_copied (function) [default: Empty Function]: This triggers after a textarea's value was copied to the clipboard by clicking "Copy To Clipboard". It receives an item, with "name", "ls_name" and "value" (value of the textarea).

on_selected (function) [default: Empty Function]: This triggers after a textarea's text was selected by clicking "Select All". It receives an item, with "name", "ls_name" and "value" (value of the textarea).

show_in_view (boolean) [default: true]: Controls whether the item is shown in the View Data window.

show_in_reset (boolean) [default: true]: Controls whether the item is shown in the Reset Data window.

General Options

msg (Msg instance): The Msg instance to use, this is required.

view_in_menu (boolean) [default: true]: Controls whether "View Data" is shown in the menu window.

reset_in_menu (boolean) [default: true]: Controls whether "Reset Data" is shown in the menu window.

after_reset (function) [default: Empty Function]: Event that triggers after all the on_reset events are fired. It fires even if no item was resetted. It returns a list with pairs of item objects containing "name" and "ls_name" with every item that was resetted.

Methods

instance.menu(): Shows the menu to select either View Data or Reset Data.

instance.view(): Shows the View Data window.

instance.reset(): Shows the Reset Data window.

To control the modal window, refer to the Msg documentation.