Mw Icon

How to save input data with jQuery cookies

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:

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
        c_start = c_value.indexOf(c_name + "=");
    if (c_start == -1) {
        c_value = null;
    } else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = c_value.length;
        c_value = unescape(c_value.substring(c_start, c_end));
    return c_value;

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

function saveValue(input) {
    var name = input.attr('name');
    var value = input.val();
function getValue(input) {
    var name = input.attr('name');
    var value = getCookie(name);
    if(value != null && value != "" ) {
        return value;

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

jQuery('input[type="text"], textarea').each(function(){
    var value = getValue(jQuery(this));
}).on('blur', function(){
    if(jQuery(this).val() != '' ) {

Share this post:

Leave a Reply

Your email address will not be published. Required fields are marked *

Other Resources

Hello Child Theme Generator

Hello Child Theme Generator

If you are like me and use Elementor to build websites, chance are you use the Hello theme. I created …

a laptop with graphs on the screen displaying website traffic trends.
How To

Website Traffic in 2024: Top Strategies

How to Build Website Traffic in 2024: Essential Strategies for Success Navigating the ever-evolving landscape of digital marketing demands a …

Website Design Wireframe Examples Of Web And Mobile Wireframe Sketches Printable.

Why should you start your web design project with wireframes?

In the rapidly evolving digital world, establishing a strong online presence is pivotal for success. A website’s design is not …

Tell me about your project

Congratulations on taking the first step in growing your business. I am looking forward to helping you achieve the success you are looking for with your website. Share a few details with me and let’s build something great!

Schedule your call today.

Use the calendar here to book a free consultation. You can choose 15 or 30 minutes, depending on how much time you think we need to discuss your project details.

Some of the things we will go over on this call:

We will dive into these items and any other touch points you need to share with me.