Storage.js

Simple HTML5 page edits. Storage.js uses the new HTML5 contenteditable attribute and localStorage to bring you HTML5 awesomeness.

Storage.js was formerly known as Storagify

I am an example, click me!

So am I, click me too! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctu.

I'm another example. Go ahead, click me to change my text, click somewhere random on the page then refresh the browser. My text will still say what you just changed it too a few seconds ago!

Now try this...

Go ahead, click me to change my text again then click somewhere random on the page. After that, quit your browser, that's right quit it! Next, come back to this page ... notice how my text is still what you just changed it too!

I'm an example of the onStart event. Click me to change my text!

I'm an example of the onExit event. Click me to change my text, then click somewhere random on the page to see me in action.

I'm an example of the the onStart & onExit events. Click me to change my text, then click somewhere random on the page to see me in action.

I'm an example of the revert option. Click me to change my text then click somewhere random on the page.
I am unique because my text isn't persistent across browser refreshes. You can still edit my text though, and it will remain what you just changed it too, but only until the next time you refresh your browser.



I'm an example of the beforeSave event. Click me to change my text, then click somewhere random on the page and watch what happens.



I'm an example of the afterSave event. Click me to change my text, then click somewhere random on the page and watch what happens.



I'm an example of both the beforeSave & afterSave events. Click me to change my text, then click somewhere random on the page and watch what happens.



I am an example of the store option. I'm similar to the revert option except my text doesn't get saved to localStorage. Useful if you have a huge table of data you want to 'Storagify' but don't want to bloat localStorage with a key for each table cell. The onStart and onExit events still work and my text is still editable, in fact—click me to change my text, then click somewhere random on the page. After someone edits me, you could do an AJAX request with my new value in the onExit event (optionally passing through the elem and text paramters described below)

API & Options

Option Type Default Description
storageKey String 'storageKey' This will be the elements key in localStorage
onStart

  • elem
  • text
Function

  • Parameter
  • Parameter
Nothing

  • Nothing
  • Nothing
This event is triggered when the the element has focus

  • An optional parameter of the onStart function that returns the current element as a 'jQuerified' Object
  • An optional parameter of the onStart function that returns the current text of the element.
onExit

  • elem
  • text
Function

  • Parameter
  • Parameter
Nothing

  • Nothing
  • Nothing
This event is triggered when the element has lost focus, when the user has clicked away from the element. Useful for doing AJAX request with the new value of the element.

  • An optional parameter of the onExit function that returns the current element as a 'jQuerified' Object
  • An optional parameter of the onExit function that returns the current text of the element [As it may may have changed]
revert Boolean false When true, reverts the element's text back to what it was before Storage.js got a hold of it
beforeSave

  • elem
  • text
Function

  • Parameter
  • Parameter
Nothing

  • Nothing
  • Nothing
This event is triggered just before the elements text is saved to localStorage

  • An optional parameter of the onExit function that returns the current element as a 'jQuerified' Object
  • An optional parameter of the onExit function that returns the current text of the element [As it may may have changed]
afterSave

  • elem
  • text
Function

  • Parameter
  • Parameter
Nothing

  • Nothing
  • Nothing
This event is triggered just after the elements text has been succesfully saved to localStorage

  • An optional parameter of the onExit function that returns the current element as a 'jQuerified' Object
  • An optional parameter of the onExit function that returns the current text of the element [As it may may have changed]
store Boolean true When false, the elements text will not be saved to localStorage

Usage

First include the latest version of jQuery

<script src="http://code.jquery.com/jquery.min.js"></script>

Next, include Storage.js and Cookies.js (a dependency of Storage.js used for IE Support) in your project

<script src="http://cdn.jsdelivr.net/cookiejs/0.1/cookie.min.js"></script>
<script src="http://cdn.jsdelivr.net/storagejs/2.0/storage.js"></script>

Last but not least, call Storage.js on whatever elements you wish to editable.

$('#theElement').storage({storageKey:'storageKey'});
  • $('#element') is the element you want the HTML5 contentEditable attribute to placed on
  • The 'storageKey' is what will the element's key will be in localStorage
  • For a complete list of options you can pass please refer to the API & Options section


That's it! Have Fun!