Best jQuery Html5 Local Storage Plugins & Tutorials with Demo

Data Saver : Never Lost your Data with jQuery

Data Saver : Never Lost your Data with jQuery

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

jQuery Form Remember State plugin

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

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 : 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

Creating a Complete HTML5 Drag and Drop File Uploader with jQuery

Creating a Complete HTML5 Drag and Drop File Uploader with jQuery

Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user.

Building Persistent Sticky Notes with Local Storage in jQuery

Building Persistent Sticky Notes with Local Storage in jQuery

HTML5 local storage is like cookies on steroids; it’s incredibly simple to use and yet still so powerful. In this tutorial, I’ll show you how to create “sticky notes” functionality, that allows your users to take persistent notes while browsing your site with jQuery.

jStorage – store data locally with JavaScript

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 : 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.

Storage.js : Simple jQuery HTML5 Page Edits with Demo

Storage.js : Simple jQuery HTML5 Page Edits with Demo

Simple HTML5 page edits. Storage.js uses the new HTML5 contenteditable attribute and localStorage to bring you HTML5 awesomeness. A jQuery plugin around the localStorage api. Formerly known as Storagify.

Create a self caching website ready for offline usage with HTML5 and jQuery

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.