How to save input data with jQuery cookies

March 31, 2015 - 1 minute read

As a UX designer and developer I work with clients of all sorts, and of course I receive all sorts of requests for web dev trickery. The other day I had a client request that stumped me … he had the need to save the users input data from a form so that if they refreshed and did not submit the form would be re-presented with the data that was input by the user. I know crazy, right? Not really, this is actually a great trick for a better user experience.

So after a few google searches I turned up this post on StackOverflow. Now the question was tagged with PHP, but the best answer was doing this using JavaScript and jQuery.

This ultimately creates a better user experience when filling out forms, not losing their information when refreshing or accidentally hitting the back button.

Here is the solution that worked best for me on how to save input data with jQuery:

The first 2 functions set and get the cookies:

After that we need to grab the data being entered by the user and save it:

Now that you have those functions you can use jQuery to set the cookies with the data entered:

Check out a live demo.

Tags: , , , ,