Share a jquery automatic client local save plugin Sisyphus.js

Today we introduce a new plugin-sisyphus.js, a plugin that was developed by Alexander Kaupanin, a Gmail client-side version of the jquery plugin, to help your users save unfinished drafts on the client.

What kind of problems do we need to solve?

Any user who has ever used the Internet will have the following painful lessons:

Write a voluminous hundreds of article, is ready to save the release of the time, found that the browser crashed, or you just ready to comment on a good article, can be ready to submit, your PC crashed. Or did you accidentally press the wrong shortcut key F5 or Back button when you were about to release it?

Have you ever been mad about the situation? For me, I have met at least 10 times, and every time I regret why I didn't save it earlier. Of course, we can use some browser plug-ins, such as some Firefox plug-ins (for example, Lazarus) to help you save the data on the form locally. But what about other browsers? Or for PCs that don't have plug-ins?

The jquery plugin we introduced today will definitely allow you to avoid having such a traumatic experience in the future.

Automatically saved Solutions

The usual solution is to automatically save the form content to a local file on time, and copy the content back to the form input item when finished.

Some sites offer a button that is saved as a draft, but this is not very convenient and the easiest way to provide a timed autosave mechanism is similar to Gmail.

Using Sisyphus.js

Here we use the simple way to implement the AutoSave function, the data will be saved to the local storage of the browser, and then the data content can be retrieved directly from here.

JavaScript code

Introduction of jquery class Library, version need is more than 1.2

Call Sisyphus, as follows:

$ (' #GBin1form1. #GBin1form2 '). Sisyphus ();

Or you need to provide all of the forms automatic Save mechanism:

$ (' Gbin1allform '). Sisyphus ();

In the above code, we call the Sisyphus method to implement the automatic save of the form data. At the same time you can customize some of the options, as follows:

Customkeyprefix

A custom extra key to save the form content data

Timeout

Data automatically saved interval, in seconds, if set to "0", then each field update is automatically saved

OnSave

This method is triggered after a local save operation

Onrestore

The method that the data fires after reading from the local store is not the same as onsavecallback, which acts on the entire form, not on a field

Onrelease

A method called after the local storage data is emptied

We can use the following code customization options:

$ (' Gbin1allform '). Sisyphus ({customkeyprefix: ' GB ', Timeout:5, Onsave:function () {}, Onrestore:function () {}, OnReleas E:function () {}}}

You can set different plug-in options for different forms, and you can modify the options for the plugin at any time.

$ (' Gbin1allform1 '). Sisyphus ({customkeyprefix: ' gbin1 ', Timeout:5, Onsave:function () {}, Onrestore:function () {}, Onrelease:function () {}}}$ (' Gbin1allform2 '). Sisyphus ({customkeyprefix: ' gbin1 ', Timeout:1, Onsave:function () {}, Onrestore:function () {}, Onrelease:function () {}}}$.sisyphus (). SetOptions ({timeout:10}); Set global option var gbin1 = $ (' #Gbin1allform1 '). Sisyphus (); Gbin1.setoptions ({timeout:15}); Set the specified form options

Plug-in information

Browser support:

Chrome 4+,

Firefox 3.5+,

Opera 10.5+,

Safari 4+,

IE 8+,

Android 2.2, which should also be available on other platforms, requires you to test yourself

Usage Requirements:

jquery1.2+

Original address: http://www.gbin1.com/