• Garlic.min.js: ~5K, requires jQuery or Zepto (with data module builded for Zepto, see changelog 0.0.6


• Native localStorage compatible only with "modern" browsers: IE8+, Chrome 4+, FF 4+, Safari 4+, Opera 11+. See more here.
  Here is an awesome plugin that extends storage for IE6 and IE7!: https://github.com/mattpowell/localstorageshim
  Use it that way with Garlic:

  <!--[if lte IE 7]>
      <script src="https://raw.github.com/mattpowell/localstorageshim/master/localstorageshim.min.js" type="text/javascript"></script>
  <![endif]-->
  
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="garlic.js"></script>

• Include jQuery or Zepto (if not already here) and garlic.js
  

  <script src="jquery.js">
  <script src="garlic.js">

• Add data-persist="garlic" to the forms you want to auto-persist
  

  <form data-persist="garlic" method="POST">

That's all! ;)

Hey, all doc is not fully here. There are some useful config parameters in Garlic code, better directly have a look there! ;)

• Want to specifically chart fields persisted by Garlic? Use the auto-added class="garlic-auto-save" class!
  
• Never destroy localStorage for a form: use data-destroy="false" (don't work on inputs separately, only on whole form inputs)
• Store form localStorage across all domain (by default, storage is specific to each pages), use data-domain="true"
  
• Manually call garlic in javascript
  

  <script type="text/javascript">
    $( '[rel=persist]' ).garlic();
  </script>

• Destroy storage for an element (don't work on an entire form yet, only input by input)
  

  <script type="text/javascript">
    $( 'input.no_good' ).garlic( 'destroy' );
  </script>

• Be notified when Garlic retrieve a field val by a custom overridable onRetrieve callback:

  <script type="text/javascript">
    $( 'input.no_good' ).garlic( {
        onRetrieve: function ( elem, retrievedValue ) {
            console.log( 'The retrieved value for ' + elem.name() + ' is : ' + retrievedValue );
        }
    } );
  </script>

• Be notified when Garlic persists a field val by a custom overridable onPersist callback:

  <script type="text/javascript">
    $( 'input.no_good' ).garlic( {
        onPersist: function ( elem, storedValue ) {
            console.log( 'The persisted value for ' + elem.name() + ' is : ' + storedValue );
        }
    } );
  </script>

• Generate your own key-storage fields policy to avoid conflicts:

  <script type="text/javascript">
    $( '#form' ).garlic( {
        getPath: function ( $elem ) {
            return $elem.attr( 'id' );
        }
    } );
  </script>

• Wisembly (Backend)
• Chrome extension by @kornnflake
• Propilex
• Figma
• Feel free to contact me if your website use Garlic in a smart way! ;)