Sisyphus.js

Gmail-like client-side drafts and bit more

Persist your form's data in a browser's Local Storage and never loose them on occasional tabs closing, browser crashes and other disasters!

Basic example Data persisted Data restored Data released

Refresh window or open new tab to see all your changes are saved and restored
Heads up! Data will be released on the form submission/reset
// Here we'll persist the form's data into localStorage on
// every keystroke
$( function() {
$( "#basic_form" ).sisyphus();
// or you can persist all forms data at one command
// $( "form" ).sisyphus();
} );

Advanced example Data persisted Data restored Data released

Refresh window or open new tab

Refresh with random param to check how locationBased works

// Persist the form's data into localStorage, but ignore
// the country select.
// Persist the data every 10 seconds unless an immediate control
// like checkbox is triggered
$( function() {
$( "#advanced_form" ).sisyphus( {
locationBased: true,
excludeFields: $( "#advanced_form_country" ),
timeout: 10
} );
} );

Multiple controls example Data persisted Data restored Data released

Checkbox Group:
Radio Buttons:
// Persist the form's data into localStorage
$( function() {
$( "#controls_form" ).sisyphus();
} );

Customization

Following options are defaults but customizable:
{
excludeFields: [],
customKeySuffix: "",
locationBased: false,
timeout: 0,
autoRelease: true,
onSave: function() {},
onBeforeRestore: function() {},
onRestore: function() {},
onRelease: function() {}
}

excludeFields is selector to exclude specified fields from observing, e.g. $( "textarea, :text" )

customKeySuffix Heads up! Prior to 1.1.103 it was named improperly as customKeyPrefix
is an addition to key in Local Storage to store form fields values.

locationBased Heads up! Prior to 1.1 default behaviour was to use URI's to tell forms from each other.
is a flag telling would form's data be stored based on URI of the page where it is placed. I.e. if set to true , almost the same page with different URI's, for example http://myite.com/posts?page=1 and http://myite.com/posts?page=2 will be recognized as different forms and data persisted for the 1st page won't be restored on the 2nd. Why might you want this option at all? As by example it could help with forums, where users can post comments in several topics at the same time (using browser tabs). As form markup is equal separating forms by page URI is the solution.

timeout is an interval in seconds to perform saving data. If 0 - save on each time field is updated.

autoRelease is a flag determining whether form's data should be erased from localStorage after submit or reset. If false , it's on your own to clear localStorage from the data via manuallyReleaseData method specially provided for that purposes.

name is a form's part of identification. As sisyphus stores data relying on form's fields names, it determines the form itself as page URI by default, and that's ok while you don't have two or more forms with equal fields names on the same page. In that case a disambiguation will take place and you should describe each form for sisyphus with it's own identifier name.

onSave is a function which is to be fired each time data is persisted into localStorage.

onBeforeRestore Heads up! If returns false then data won't be restored and onRestore won't be triggered as well
is a function which is to be fired before form's data is restored. Unlike onSave it's called once for the entire form only, not for each field.

onRestore is a function which is to be fired when form's data is restored from localStorage. As onBeforeRestore it's called once for the entire form, not for each field.

onRelease is a function which is to be fired when localStorage is cleared of previously persisted form's data.

Interaction with other plugins Data persisted Data restored Data released

Refresh window or open new tab to see all your changes are saved and restored
Let's add some fanciness to our form's selects via Select2
// What's going on here?
// Here we'll persist the form's data into localStorage on
// every keystroke
$( function() {
$('.select2 select').select2();
$('.select2tag').select2 {tags:["red", "green", "blue"]}
$( "#select2_form" ).sisyphus({
// note that for this form timeout is senseless,
// as selects trigger "change" event
timeout: 10
});
} );
Let's add some fanciness to our form's textareas via CKEditor
// What's going on here?
// Here we'll persist the form's data into localStorage on
// every keystroke
$( function() {
$( "#ckeditor_form" ).sisyphus()
} );

Browser compatibility

Top-best-browsers
  • Firefox 3.5+
  • Safari 4+
  • Opera 10.5+
  • Chrome 4+
  • IE 8+ (6 & 7 with jStorage on page loaded prior to Sisyphus)
Sisyphus is released under MIT License
© 2011 - 2014 Alexander Kaupanin