This plugin saves data from input fields to local storage and can restore data if you reopen “form”.
Features:
- Listen to events (onKeyPress, OnChange)
- Plugin can save data in form by URL
- Open custom dialog forms
- Add prefix to different forms
Best jQuery Html5 Local Storage Plugins & Tutorials with Demo
jQuery Form Remember State plugin
When called on a form element, localStorage is used to remember the values that have been input up to the point of either saving or unloading. (closing window, navigating away, etc.) If localStorage isn’t available, nothing is bound or stored.
By default, the plugin looks for an element with a class of remember_state within the form to show a note indicating there is stored data that can be repopulated by clicking on the anchor within the remember_state container. If the element doesn’t exist, it is created and prepended to the form. You can override the selector and the HTML that is prepended in the options object you pass to the plugin.
jQuery Toggle Panel
Toggle Panel is a lightweight jQuery plugin that helps you create toggleable content.
Features :
- Toggle Panel fits right into a responsive or fluid design. Fixed width is possible too.
- With HTML5 Local Storage the state (expanded or collapsed) is saved and restored upon reentering the page.
- HTML5 audio and video elements inside a toggle panel are automatically paused when it is collapsed.
- Smooth and beautiful CSS3 transitions bring Toggle Panel to life.
- Load content via AJAX
Create.js : Make anything editable with jQuery
Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.
Features:
- Making RDFa-annotated content on pages editable
- Managing collections of content (add, remove)
- Local, in-browser storage and retrieval of unsaved content
- Adaptable connector for communicating with the back-end system
- Running workflows (approval, etc.) for content items
- Browsing and reverting content history
- Easy rebranding of the interface with some CSS
jStorage – store data locally with JavaScript
jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. Note that functions, DOM nodes, host objects and such can not be saved.jStorage was first developed under the name of DOMCached but since a lot of features were dropped to make it simpler (like the support for namespaces and such) it was renamed. DOMCached had separate files for working with Prototype and jQuery but jStorage can handle both in one go.
jStorage makes use of HTML5 local storage where available and userData behavior in Internet Explorer older versions. Webkit SQLite is not supported.
$.store : jQuery Extensible localStorage API with Demo
$.store offers an extensible API to persistent data storage on the client side of things. While modern browsers support localStorage, older Internet Explorers offer userData. For even older browsers a window.name fallback is in place.
New storage drivers and serializers can be easily added to $.store. You could thus create two storage environments, one for persistent storage, and one for session storage. User defined serializers can aid in converting your javascripts objects to JSON and back to objects.
Create a self caching website ready for offline usage with HTML5 and jQuery
In this tutorial we will create a website that is able to cache its own content, including markup, stylesheets and javascripts, as a user browse it. To dynamically restore cached files we use a offline manifest and the local storage. Or in other words: every page a user visited online will be available offline too.
Please note that the demo application is written in CoffeeScript and must be compiled to JavaScript. If you have Thor installed use the command thor compile:js.
