It would be awesome if file input fields values could be persisted. Of course, I don't know if this is even possible. Disregard this issue if it is not even a possibility in the browser. Otherwise it would be great. Thanks for the amazing plugin!

Hi there, congrats for the plugin, it is pretty awesome.

I am playing with it and using migrate plugin of Jquery and I have had a little warning coming from garlic [1]. I have studied a little bit the code and I have found the following [2] [3]. On the one hand you are using .attr method and on the other hand you are using .prop which is what migrate recommends. By replacing .attr for .prop the warn is not showed anymore.

Maybe it helps!

[1] - http://d.pr/i/NeNY
[2] - http://d.pr/i/pt1f
[3] - http://d.pr/i/tNcW

I like your plugin ...
I have a problem. I do not use the default Submit functionality to submit a form as I use AJAX. I could remove the default functionality of a Submit button, but in many situations within a dialogue box, I find its behaviour unreliable. Therefore I configure my own jQuery Click function which responds to an input type button with a given ID or Class.
I have tried using "destroy" on all individual fields but this failed. I need some way of emulating the activity of a Submit button inside a jQuery function, which is, I suppose, a "destroyall" function.

Is there any way to data-persist only one field (or set of field with a wrapper) without add data-persist="garlic" to <form> and add data-persist="false" to all other fields?

I have js-generated fields I don't want to persist but I have no way to add data-persist="false" to them.

Hi, I'd like to alter the message. I don't see why the below is not working, thanks!

$(document).ready ->
  $("[data-persist='garlic']").garlic
    conflictManager:
      enabled: true
      garlicPriority: true
      template: '<span class="garlic-swap"></span>'
      message: '(Click here to toggle stored data)'
      onConflictDetected: ( $item, storedVal )-> true

your .clear function should not conflict with the localStorage usage of other libraries or vanilla javascript usage - but your API has a clear function that will DELETE all localStorage data.

suggest you only call localStorage.removeItem(string) not localStorage.clear() and only remove items added to localStorage by your library.

1. Load a simple test page - using a local webserver and not file://
2. Focus on a textbox

I assume it should not crash when not supported

http://localhost:8080/static/garlic/test.html
Debugger shows: Unhandled exception at 0x652b57a5 in iexplore.exe: 0xC0000005: Access violation reading location 0x00000000.

IE version 8.0.7601.17514

Hi, I want to know if it's possible to persist data from non form elements. I'm trying to persist data inputed in a div using https://github.com/mindmup/bootstrap-wysiwyg

   if ( 'undefined' === typeof Array.indexOf && -1 !== localStorage.key(i).indexOf( 'garlic:' ) )

This line returns false because Firefox implements Array.indexOf. I see you've added this part of conditional in 65d5dc2 but I'm not sure what was your intention and if removing this conditional will break anything.

Care to explain what was the original purpose and what are possible consequences of removing / rewriting this part?

We are interested in using this plugin for mobile. But we dont use jQuery on mobile but zepto. Could we use this plugin with Zepto?

In Angular a form element is also a directive, so it contains some internal iformation (like $scope for example) in data object. And somehow this code

var options = $.extend(true, {}, $.fn.garlic.defaults, option, this.data() )

causes an infinite recursion.

Possible solution could be not to extend options with the whole data object, but only with exact properties (data-persist, data-storage, data-destroy and data-domain). But also I think it's a good practise to prefix data attributes with plugin name (data-garlic-persist for example) to aviod conflicts with other declarative plugins in future.

Like on Parsley here: https://github.com/guillaumepotier/Parsley.js/blob/master/parsley.js#L1249

No need on garlic to persist hidden fields nor files input

I think it's a good idea to not persist password fields by default. Perhaps persistence should be explicitly enabled for password inputs, if the developer adds a data-storage="true" attribute.

Let me know what you think. and I can submit a pull request.

Would it be difficult to add an onStore callback, which would allow us to display some notification to our (paranoid) users that the store is actually happening as they change fields? We'd be willing to work on it with some direction. Thanks!

John

hi,
on commit c939da9
you changed the setter for Storage to check for empty string

if ( 'string' === typeof value && '' !== value ) {
        localStorage.setItem( key , value );
      }

but this means that one can not write something on a text input, delete it, reload and see a blank value.

thank you

When installing garlic.js through bower: it returns the following warning:

bower copying .....
mismatch The version specified in the component.json of package garlicjs mismatches the tag (1.2.0 vs 1.0.2)
mismatch You should report this problem to the package author
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.9.0
bower copying ...
bower installing garlicjs#1.2.0
bower installing jquery#1.9.0

No harm done because install works but good to know, maybe?

Video @ https://docs.google.com/open?id=0B0emwt_fpZvddFNqQWJ5WVNfZVE

SO issue: http://stackoverflow.com/questions/13489224/how-to-implement-node-localname-equivalent-for-ie8

When submitting the form, data in local storage is always cleared, regardless of whether the form submit goes ahead (i.e. even if the form fails validation).

So, in a form using both Garlic.js and Parsley.js, if you fill in all fields and hit submit (but with an invalid entry), then the data is cleared. I would expect (hope) that data is only cleared once the form submits and validates, otherwise data is cleared too early.

This could be seen in the simple form example. Just check some checkboxes, refresh the page and then press the reset button.

It will reset the values (when refreshing the page again, all checkboxes will be unchecked) but this change is not reflected in realtime like in any of the other inputs.

A bug? a behavior? :(

Problem

I get a error in the console when I have a file input in the form.

Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Fix

data-storage="false"

So, the website looks bad :)

runa:/tmp/ $ HEAD -d -S http://twitter.github.com/bootstrap/assets/css/bootstrap.css                                                        
HEAD http://twitter.github.com/bootstrap/assets/css/bootstrap.css
301 Moved Permanently
HEAD http://twitter.github.io/bootstrap/assets/css/bootstrap.css
301 Moved Permanently
HEAD http://getbootstrap.com/2.3.2/
200 OK

Sometimes, garlic.js will get the incorrect value for if a checkbox is checked or not.
Using .attr('checked') is incorrect.

See:
http://api.jquery.com/attr/

Specifically:
Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

İt will be helpfull if we add maximum datetime for persisted data.

I would like to hide this from showing up on persisted fields. Any ideas?

Garlic test suite for jQuery, unminified version

passes: 45
failures: 9
duration: 2.59s

Garlic.js test suite

Test getPath
✓
getPath() for #input1 ‣

✓
getPath() for #div1 ‣

✓
getPath() for #textarea2 ‣

✓
getPath() for #checkbox1 ‣

✓
getPath() for #checkbox2 ‣

✓
getPath() for #radio1 ‣

✓
getPath() for #radio2, should be same as #radio1 ‣

✓
getPath() for elements with domain=true ‣

Test Garlic storage
✓
Test has() ‣

✓
Test set() ‣

✓
Test get() ‣

✓
Test destroy() ‣

Test inputs binding
✓
On a simple form with only one input[type=text] ‣
expect( $( '#input1' ).hasClass( 'garlic-auto-save' ) ).to.be( true );

✖
On a simple form with only one input[type=text] and a textarea ‣
Error: expected false to equal true
at assert (http://garlicjs.org/tests/expect.js:99:7)
at equal (http://garlicjs.org/tests/expect.js:200:5)
at Anonymous function (http://garlicjs.org/tests/expect.js:73:13)
at Anonymous function (http://garlicjs.org/tests/tests.js:79:9)
at run (http://garlicjs.org/tests/mocha.js:3716:24)
at runTest (http://garlicjs.org/tests/mocha.js:4071:5)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4117:7)
at next (http://garlicjs.org/tests/mocha.js:3997:7)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4006:7)
at next (http://garlicjs.org/tests/mocha.js:3954:16)

✓
On a div which is obviously not a form ‣

✖
On a single form element, not the wole form ‣
Error: expected false to equal true
at assert (http://garlicjs.org/tests/expect.js:99:7)
at equal (http://garlicjs.org/tests/expect.js:200:5)
at Anonymous function (http://garlicjs.org/tests/expect.js:73:13)
at Anonymous function (http://garlicjs.org/tests/tests.js:86:9)
at run (http://garlicjs.org/tests/mocha.js:3716:24)
at runTest (http://garlicjs.org/tests/mocha.js:4071:5)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4117:7)
at next (http://garlicjs.org/tests/mocha.js:3997:7)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4006:7)
at next (http://garlicjs.org/tests/mocha.js:3954:16)

✓
On a select input ‣

✓
On a checkboxes inputs ‣

✖
On a radio buttons ‣
Error: expected false to equal true
at assert (http://garlicjs.org/tests/expect.js:99:7)
at equal (http://garlicjs.org/tests/expect.js:200:5)
at Anonymous function (http://garlicjs.org/tests/expect.js:73:13)
at Anonymous function (http://garlicjs.org/tests/tests.js:99:9)
at run (http://garlicjs.org/tests/mocha.js:3716:24)
at runTest (http://garlicjs.org/tests/mocha.js:4071:5)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4117:7)
at next (http://garlicjs.org/tests/mocha.js:3997:7)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4006:7)
at next (http://garlicjs.org/tests/mocha.js:3954:16)

✓
On a form without data-persist, binded manually in javascript ‣

✖
On a form that has data-storage="false" inputs ‣
Error: expected false to equal true
at assert (http://garlicjs.org/tests/expect.js:99:7)
at equal (http://garlicjs.org/tests/expect.js:200:5)
at Anonymous function (http://garlicjs.org/tests/expect.js:73:13)
at Anonymous function (http://garlicjs.org/tests/tests.js:106:9)
at run (http://garlicjs.org/tests/mocha.js:3716:24)
at runTest (http://garlicjs.org/tests/mocha.js:4071:5)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4117:7)
at next (http://garlicjs.org/tests/mocha.js:3997:7)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4006:7)
at next (http://garlicjs.org/tests/mocha.js:3954:16)

✖
On a form that is of type number ‣
Error: expected false to equal true
at assert (http://garlicjs.org/tests/expect.js:99:7)
at equal (http://garlicjs.org/tests/expect.js:200:5)
at Anonymous function (http://garlicjs.org/tests/expect.js:73:13)
at Anonymous function (http://garlicjs.org/tests/tests.js:109:9)
at run (http://garlicjs.org/tests/mocha.js:3716:24)
at runTest (http://garlicjs.org/tests/mocha.js:4071:5)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4117:7)
at next (http://garlicjs.org/tests/mocha.js:3997:7)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4006:7)
at next (http://garlicjs.org/tests/mocha.js:3954:16)

✖
On a form that is of type tel ‣
Error: expected false to equal true
at assert (http://garlicjs.org/tests/expect.js:99:7)
at equal (http://garlicjs.org/tests/expect.js:200:5)
at Anonymous function (http://garlicjs.org/tests/expect.js:73:13)
at Anonymous function (http://garlicjs.org/tests/tests.js:112:9)
at run (http://garlicjs.org/tests/mocha.js:3716:24)
at runTest (http://garlicjs.org/tests/mocha.js:4071:5)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4117:7)
at next (http://garlicjs.org/tests/mocha.js:3997:7)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4006:7)
at next (http://garlicjs.org/tests/mocha.js:3954:16)

✖
On a form that is of type email ‣
Error: expected false to equal true
at assert (http://garlicjs.org/tests/expect.js:99:7)
at equal (http://garlicjs.org/tests/expect.js:200:5)
at Anonymous function (http://garlicjs.org/tests/expect.js:73:13)
at Anonymous function (http://garlicjs.org/tests/tests.js:115:9)
at run (http://garlicjs.org/tests/mocha.js:3716:24)
at runTest (http://garlicjs.org/tests/mocha.js:4071:5)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4117:7)
at next (http://garlicjs.org/tests/mocha.js:3997:7)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4006:7)
at next (http://garlicjs.org/tests/mocha.js:3954:16)

✓
On a form that is of type password ‣

Test inputs events
✓
Data is persisted on supported events: DOMAttrModified, textInput, input, change, keypress, paste, focus ‣

Test input data retrieving
✓
An input should be populated by its stored data ‣

✓
Select must be setted accordingly to storage ‣

✓
Radio buttons must be checked accordingly to storage ‣

✓
Checkboxes buttons must be checked accordingly to storage ‣

✓
If custom retrieval function is defined, execute it ‣

Auto expiration feature
✖
If data auto-expires, data is persisted an expires flag is set in localStorage ‣
Error: expected null to equal 'foo'
at assert (http://garlicjs.org/tests/expect.js:99:7)
at equal (http://garlicjs.org/tests/expect.js:200:5)
at Anonymous function (http://garlicjs.org/tests/expect.js:73:13)
at Anonymous function (http://garlicjs.org/tests/tests.js:200:11)
at dispatch (http://garlicjs.org/resources/jquery-1.8.2.min.js:2:37951)
at h (http://garlicjs.org/resources/jquery-1.8.2.min.js:2:33788)
at trigger (http://garlicjs.org/resources/jquery-1.8.2.min.js:2:36599)
at Anonymous function (http://garlicjs.org/resources/jquery-1.8.2.min.js:2:44364)
at each (http://garlicjs.org/resources/jquery-1.8.2.min.js:2:14472)
at each (http://garlicjs.org/resources/jquery-1.8.2.min.js:2:11142)

✓
If data-expires is set on a form item, all form fields have the same expiration date, and this date updates each time one of them item is updated ‣

✖
Data is not persisted in localStorage anymore after expiration time ‣
Error: expected false to equal true
at assert (http://garlicjs.org/tests/expect.js:99:7)
at equal (http://garlicjs.org/tests/expect.js:200:5)
at Anonymous function (http://garlicjs.org/tests/expect.js:73:13)
at Anonymous function (http://garlicjs.org/tests/tests.js:244:11)
at garlic (http://garlicjs.org/garlic.js:389:5)
at Anonymous function (http://garlicjs.org/tests/tests.js:243:9)
at run (http://garlicjs.org/tests/mocha.js:3716:24)
at runTest (http://garlicjs.org/tests/mocha.js:4071:5)
at Anonymous function (http://garlicjs.org/tests/mocha.js:4117:7)
at next (http://garlicjs.org/tests/mocha.js:3997:7)

Test input data change
✓
If some text is added / removed in a textarea or an input[type=text], it should be updated in storage ‣

✓
If a text field is willingly cleared by an user, its storage will also be cleared ‣

✓
If a select is changed, new value should be stored ‣

✓
If radio button is selected, value or new value should be stored ‣

✓
Same, but with radio buttons not at the same DOM level ‣
$( '#radio2' ).val( 'bar' );
$( '#radio2' ).trigger( 'change', function () {
expect( garlicStorage.get( $( '#radio2' ).garlic( 'getPath' ) ) ).to.be( 'bar' );
} )

✓
If a checkbox is checked, its state should be persisted ‣

✓
Same, but with checkboxes not at the same DOM level ‣

✓
If a checkbox is unchecked, its state should be removed from storage ‣

Conflicts management
✓
If input,textarea,select fields have default value and conflictManager enabled, detect conflict41ms ‣

✓
If input,textarea,select fields have default value and conflictManager enabled, display swap handler next to it ‣

✓
If garlicPriority is set to true (default), display for input,textarea,select persisted data ‣

✓
If swap action is triggered, change data for input,textarea,select fields ‣

✓
If swap action is triggered, again change data again for input,textarea,select fields ‣

✓
If garlicPriority is set to false, display default data and swap with persisted one ‣

Test input data destroy
✓
submit;reset button should destroy input;textarea;select;checkbox;radio fields persisted data ‣

✓
Reset button should remove both text and localStorage, but only on current form ‣

✓
Destroy localStorage when garlic( 'destroy' ) is manually fired on an elem ‣

✓
Do not destroy localStorage if data-destroy=false ‣

Final tests that clean/clear localStorage
✓
Test clean() ‣

✓
Test clear() ‣

TODO:
Work on an alternative to localStorage for non compatible browsers

Possible Solution:
Use store.js
https://github.com/marcuswestin/store.js

Is there any knowledge of usage with knockout.js?
It seems to work some of the time.

Say I do this to an input:
jQuery("#my-input").val(4000);

This sets the value to 4000.

If I refresh the page this doesn't save with garlic, if I type 4000 in manually into an input this works.

Is there a workaround to get this to work?

When form has several array fields (e.g. urls[]), garlicjs saves only one, and after next visit, it inputs that last typed field into all.
It should store all fields, and fill the form.

In the Simple Form demo, all the fields persist for me except the checkboxes. I am using Firefox 17.0.1 on Ubuntu 12.04. This appears to be a browser-specific issue, as Chrome works perfectly.

This issue is changed already
Read the discussion yourself :)

=== Original issue content
Sometimes when i refresh a form
I got some strange hint "This is your saved data. Click here to see default one"

Can I set option to disable it or choose other behavior? (I just want the hint gone)
It's screwing the layout:(

I will disable it for the moment :S
But thanks for the rest of the work!

jQuery Validation Plugin (http://jqueryvalidation.org) is widely used. When I submit a form the localStorage is cleaned even though my Validation Plugin says the form data is invalid.
I know we can set in Garlic the "destroy: false" and than implement the "submitHandler" in Validation Plugin and etc. But if we had a property to configure this feature direct in Garlic it would be much more easier.

I've got a single "logical form" that is filled in over a few different pages, each with one HTML form. For example, You go to register1, press "Next" (which validates and submits the form - using Parsley!), then to register2, etc.

I want to provide a "back" button so the user can go back to the previous form to change something. I've previously used PHP $_SESSION variables for this. But It seems that Garlic could make life a lot simpler.

The problem is that when I submit the form on register1 form the form data is destroyed. I want to keep the form data until after the register3 form is submitted. The destroy all of the forms. Is this possible?

Thank you in advance,

Robert

Using typeahead.js (http://twitter.github.io/typeahead.js/) I am unable to get Garlic to properly save values input via the typeahead inputs. Underneath they are an but clearly there is some differing behavior that is causing this to mess up. Any thoughts on a workaround?

I have a form that contains several divs. Inputs within the same div as the opening form tag get saved, but those outside do not.

This might not be an issue with Garlic.js, but there is a conflict when using a bootstrap modal cancel button and garlic

[button class="btn" data-dismiss="modal" type="reset"]Close modal and clear data[/button]

Despite the type being set to reset, the local storage is not cleared when the button is pressed (due to whatever happens to data-dismiss). I found a workaround, but it makes the code a bit messy

[button class="btn" onclick="$('#myModalId').modal('hide');" type="reset"]

I have a jquery modal opening on an icon click. The modal has a form where I want the data to persist. When i type in some data and close and refresh the page and open the same modal, the data does not persist.

Hi,
awesome work and thank you for this plugin.

i have made some tests and it does not work with IE 7

thanks in advanced.

Hey all,

I'd love to use this on a Magento site I work on -- but it's using Prototype, which already claims the $ global so it can't be used for jQuery. Normally I'd just use jQuery.noConflict() and be done with it, but with your bundled Zepto version will this still be a conflict that I'll need to noConflict somehow? Or is the bundled Zepto version not claiming the $ global?

Hi,

When using the IE7 shim you need to include id="ie-localstorage-shim" inside the script tag or you will get a parentNode not found. It shows this on the shim documentation but not very clearly, it might help for people copying and pasting for the garlicjs homepage

If I check a checkbox and than uncheck it, Garlic will restore the form with the checkbox checked.

Tested this on the homepage demo with Safari 6.0.2 on Mac

Step-by-step:
1: Open http://garlicjs.org
2: For a clean test-case, uncheck all checkboxes: "I", "Will", "Be" and "Persisted"
3: For a clean test-case, refresh
4: Check any of the checkboxes.
5: Uncheck the checkboxes you just checked
6: Refresh.

The checkboxes you checked at step 4 and unchecked at 5 will now be checked again.

It would be nice if we could have the option not to reset when a form is submitted. This would be useful when we have a wizard containing several forms, and we only want to reset when the last one is successfully submitted.

I know you didn't specify whether it works in IE9, you just say "modern" browsers? So should it?

In Chrome, the text input persistance works but not the select (dropdown), at least here on my side. ?

I would like to exclude one input field from data saving. How I could do?

Garlic.js fails when it comes to radio buttons, they don't get fired for the onRetrieve (Required to set active on Button Groups to show which radio button is active) event as far as my knowledge is and it doesn't clear any existing ones before checking the one it needs to (the attribute at least).

Doesn't fire jQuery change event either...

Hi all,
Thanks for building Garlis.js, looks like an awesome tool. While it's advertised that 'submit' destroys the data, for certain types of niches, like real-estate websites, that data may be good to save after submit (if they are entering in information for different properties). Any thoughts on this? It'd probably be a good idea to destroy the data if the user left the site (but local storage can be set to expire at the end of the session). Thanks!

When localStorage gets full you will get a QUOTA_EXCEEDED_ERR. You should handle that with a try-catch. See: http://www.sitepoint.com/html5-web-storage/
E.g. the "sisyphus" uses the try-catch: http://sisyphus-js.herokuapp.com/

Hi, any workaround to make it work with iCheck ?

I have a form that has two textarea elements and a bunch of dynamically generated input fields. The first textarea element get's it's value saved and if I change something on it, the change is saved by garlic for the next refresh. As for the second textarea it gets saved only once and then it keeps that same value, it doesn't change at all. Last time I wiped the localStorage variable in order to get it to save the new value. Any ideas ?