Best jQuery Html5 Local Storage Plugins & Tutorials with Demo

TabbedContent : jQuery lightweight Tabs plugin

TabbedContent : jQuery lightweight Tabs plugin

TabbedContent is a lightweight* tabs plugin that uses the HTML5 history API to add your tab navigation to your browser’s history.

jQuery Form Cache Plugin

jQuery Form Cache Plugin

A simple jQuery form cache plugin.

jQuery Html5 local Storage Plugin

jQuery Html5 local Storage Plugin

A simple, lightweight jQuery plugin for reading, writing and deleting html5 local storage.

Pick-a-Color : jQuery color picker for Twitter Bootstrap

Pick-a-Color : jQuery color picker for Twitter Bootstrap

A easy-to-use jQuery color picker for Twitter Bootstrap.There are some great color picker plugins out there, but most cater to the needs of techies and designers, providing complicated controls to access every color imaginable.

Pick-a-Color is designed to be easy for anyone to use. The interface is based on Twitter Bootstrap styles so it looks lovely with the styles of almost any site.

Features:

  • Flexible text entry: Accepts HEX, RGB, HSL, HSV, HSVA, and names, thanks to Brian Grinstead’s amazing Tiny Color library.
  • Saved colors: Saves up to 16 recently used colors. Colors are stored in localStorage or cookies.
  • Advanced: Advanced tab lets users modify hue, saturation, and lightness to make any color their hearts desire.
  • Basic color palette: Easy-to-use preset colors that can be lightened and darkened.
  • Chunky mobile styles: Dragging is easy, even on a touch device.

Responsive HTML5 gallery tutorial with CSS3

Responsive HTML5 gallery tutorial with CSS3

Responsive HTML5 image gallery tutorial. CSS3 acceleration.

Features:

  • Responsivity: adjust layout and behaviour
  • Touch event handling
  • Fastclicks without 300ms click delay
  • CSS3 accelerations
  • SPA architecture
  • Scalable graphics via icon font
  • Client side local storage

jQuery plugin for caching forms using HTML5 local storage

jQuery plugin for caching forms using HTML5 local storage

In this tutorial we’ll be utilizing the localStorage mechanism to store the current state of a form. This means that when the page is reloaded or the user re-opens the page after closing it the form will be populated with the previous values. For improved complexity, we’ll be storing the data as serialized JSON strings.

Reddit Image Browser with jQuery & Html5

Reddit Image Browser with jQuery & Html5

Reddit Image Browser is a client-side image browser for Reddit. The application uses jQuery to fetch and process unauthenticated JSONP. Some rendering is done with D3.js with the eventual goal of creating richer visualizations and user interactivity. HTML 5 Local Storage is used to maintain state.

Features:

  • Runs entirely in your browser.
  • Identifies post type (i.e. NSFW, videos, self) and displays content in an appropriate format.
  • Infinite scrolling with automatic asynchronous loading.
  • Hotkeys, such as j to go to next post and c to open comments page, enable fast browsing.
  • Your subreddit selections persist across sessions via HTML 5 Local Storage.
  • Local Storage support for IE provided by Remy Sharp’s storage polyfill.
  • Retries on load error.

jQuery Terminal Emulator : Creating Command line interpreters

jQuery Terminal Emulator : Creating Command line interpreters

jQuery Terminal Emulator is a plugin for creating command line interpreters in your applications. It can automatically call JSON-RPC service when user type commands or you can provide you own function in which you can parse user command. It’s ideal if you want to provide additional functionality for power users. It can also be used to debug your aplication.

Features:

  • You can create interpreter for your JSON-RPC service with one line of code.
  • Support for authentication (you can provide function when user enter login and password or if you use JSON-RPC it can automatically call login function on the server and pass token to all functions)
  • Stack of interpreters – you can create commands that trigger additional interpreters (eg. you can use couple of JSON-RPC service and run them when user type command)
  • Support for command line history it use Local Storage if posible
  • Include keyboard shortcut from bash like CTRL+A, CTRL+D, CTRL+E etc.

jQuery totalstorage : Local Storage Plugin

jQuery totalstorage : Local Storage Plugin

A jQuery plugin to manage local storage and cookies simultaneously in a simple interface.

We found that HTML5 Local Storage gave us the best return in terms of reliability and speed. Internet Explorer compatibility? Not so much. So we wrote totalStorage, a jQuery plugin that combines the ease and usefulness of totalStorage with the universal compatibility of cookies (along with some helpful tools like automatic JSON encoding/decoding).

  • The browser doesn’t support local storage it will fall-back to cookies! (Using the wonderful $.cookie plugin).
  • Send it strings, numbers even complex object arrays! TotalStorage does not care. Your efforts to defeat it will prove futile.
  • Simple as shit. jStorage and some other very well-written plugins provide a bevy of options for expiration, security and so forth. Frequently this is more power than you need and vulnerable to confusion if you just want it to work (JWITW)

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