24
  1. Enter/change something in a textarea
  2. Before submitting the form, leave the page (e.g. by clicking browser's back button)
  3. Go back to the edit page (e.g. by clicking the forward button)

Expected result: the content entered in the textarea should still be there

Actual result:

  • with HTTPS: all changes are gone (bad!)
  • with HTTP: the changes are still there (good!)

Why is this happening when using HTTPS? How can I prevent this? Is the browser or the website responsible?

unor
  • 92,415
  • 26
  • 211
  • 360
  • 2
    You can't prevent it, and it is the browser's responsibility to handle. Some sites address the issue by periodically saving the content to persistent local storage, or using AJAX to save a draft of the content to the server, etc. – Remy Lebeau Jan 20 '13 at 04:31
  • For preventing this from the user side (in Firefox), see: http://superuser.com/q/539789/151741 – unor Jan 22 '13 at 05:07

2 Answers2

93

You can consider the following solutions:

The autocomplete Attribute (HTML5)

This seems unrelated since autocomplete tells the browser to complete fields with the values based on earlier user input which were "submitted" with the form. But in my tests I saw that; after filling out the form without submitting; when I hit the forward (history) button and hit back again; form fields were auto-filled if I set autocomplete="on" and all were cleared when set to "off".

So; (if targeting HTML5 users) you can use this attribute to "cache" your form data. (Works on all major browsers, except Opera).

<form action="/update" method="post" autocomplete="on">
    Email:    <input type="text" id="email" /><br />
    Username: <input type="text" id="uname" /><br />
    Password: <input type="password" id="pwd" autocomplete="off"/><br />
    <input type="submit" />
</form>

Notice that you can set the auto-complete feature off for a specific field (password in this case) when the rest of the form controls are on.

MSDN Remarks:

  • If the autocomplete attribute is missing, the field will default to an 'on' state if element has no parent form, or if the form has autocomplete set to 'on'.
  • Information provided by the AutoComplete feature is not exposed to the object model, and is not visible to a Web page until the user selects one of the suggestions as a value for the text field.

Save the Un-submitted Form Data Locally:

You can store the input data locally, right before the page redirection or on focus-out event of every form control:

Cookies

The good-old cookies can come handy in this case but you should consider the down-sides:

  1. Even though you can encrypt the values programmatically; since we will be working on the client-side, cookies are not truly secure for this. Http-Only and Secure marked cookies will not help us here, because these options are used to enforce SSL when the cookie is "sent" (secure) and cannot be accessed from Javascript (http-only).
  2. Browsers have a cookie size limit. From MSDN: "Most browsers support cookies of up to 4096 bytes. Because of this small limit, cookies are best used to store small amounts of data". So, if you don't watch for this size (when you write the cookie and/or by limiting the control's value via maxlength attributes); that could be a problem. (and trimming the value is the worst thing in this case).
  3. Browsers also have a limit to the number of cookies that can be set per domain. So; when storing the form data in the cookies; instead of setting cookies for each form field value; you should merge them into one or few cookies; for your site not to exceed this limit.

Still, the bright side is they are supported by all browsers and if you don't plan to "cache" sensitive and too-long data via Cookies, then you can use the following solution. If this is not the case; you should better go with the next suggestion: localStorage.

// Below is just a demonstration and is not tested thoroughly for 
// production-ready web applications by any means.  
// But it should give you an idea.

/** 
 * Caches the user-input data from the targeted form, stores it in the cookies 
 * and fetches back to the form when requested or needed. 
 */
var formCache = (function () {
    var _form = null, 
        _formData = [],
        _strFormElements = "input[type='text'],"
                + "input[type='checkbox']," 
                + "input[type='radio']," 
                // + "input[type='password'],"  // leave password field out 
                + "input[type='hidden'],"
                // + "input[type='image'],"
                + "input[type='file'],"
                // more input types...
                + "input[type='email'],"
                + "input[type='tel'],"
                + "input[type='url'],"
                + "select,"
                + "textarea";

    function _warn() {
        console.log('formCache is not initialized.');
    }

    return {

        /**
         * Initializes the formCache with a target form (id). 
         * You can pass any container id for the formId parameter, formCache will 
         * still look for form elements inside the given container. If no form id 
         * is passed, it will target the first <form> element in the DOM. 
         */
        init: function (formId) {
            var f = (typeof formId === 'undefined' || formId === null || $.trim(formId) === '') 
                    ? $('form').first() 
                    : $('#' + formId);
            _form = f.length > 0 ? f : null;
            console.log(_form);
            return formCache; // make it chainable
        },

        /** 
         * Stores the form data in the cookies.
         */
        save: function () {
            if (_form === null) return _warn();

            _form
                .find(_strFormElements)
                .each(function() {
                    var f = $(this).attr('id') + ':' + formCache.getFieldValue($(this));
                    _formData.push(f);
                });
            docCookies.setItem('formData', _formData.join(), 31536e3); // 1 year expiration (persistent)
            console.log('Cached form data:', _formData);
            return formCache;
        },

        /** 
         * Fills out the form elements from the data previously stored in the cookies.
         */
        fetch: function () {
            if (_form === null) return _warn();

            if (!docCookies.hasItem('formData')) return;
            var fd = _formData.length < 1 ? docCookies.getItem('formData').split(',') : _formData;
            $.each(fd, function (i, item) {
                var s = item.split(':');
                var elem = $('#' + s[0]);
                formCache.setFieldValue(elem, s[1]);
            });
            return formCache;
        },

        /** 
         * Sets the value of the specified form field from previously stored data.
         */
        setFieldValue: function (elem, value) {
            if (_form === null) return _warn();

            if (elem.is('input:text') || elem.is('input:hidden') || elem.is('input:image') ||
                    elem.is('input:file') || elem.is('textarea')) {
                elem.val(value);
            } else if (elem.is('input:checkbox') || elem.is('input:radio')) {
                elem.prop('checked', value);
            } else if (elem.is('select')) {
                elem.prop('selectedIndex', value);
            }
            return formCache;
        },

        /**
         * Gets the previously stored value of the specified form field.
         */
        getFieldValue: function (elem) {
            if (_form === null) return _warn();

            if (elem.is('input:text') || elem.is('input:hidden') || elem.is('input:image') ||
                elem.is('input:file') || elem.is('textarea')) {
                    return elem.val();
                } else if (elem.is('input:checkbox') || elem.is('input:radio')) {
                    return elem.prop('checked');
                } else if (elem.is('select')) {
                    return elem.prop('selectedIndex');
                }
            else return null;
        },

        /**
         * Clears the cache and removes the previously stored form data from cookies.
         */
        clear: function () {
            _formData = [];
            docCookies.removeItem('formData');
            return formCache;
        },

        /**
         * Clears all the form fields. 
         * This is different from form.reset() which only re-sets the fields 
         * to their initial values.
         */
        clearForm: function () {
            _form
                .find(_strFormElements)
                .each(function() {
                    var elem = $(this);
                    if (elem.is('input:text') || elem.is('input:password') || elem.is('input:hidden') || 
                        elem.is('input:image') || elem.is('input:file') || elem.is('textarea')) {
                        elem.val('');
                    } else if (elem.is('input:checkbox') || elem.is('input:radio')) {
                        elem.prop('checked', false);
                    } else if (elem.is('select')) {
                        elem.prop('selectedIndex', -1);
                    }
                });
            return formCache;
        }
    };
})();

// Save form data right before we unload the form-page
$(window).on('beforeunload', function (event) {
    formCache.save();
    return false;
});

// Initialize and fetch form data (if exists) when we load the form-page back
$(document).on('ready', function (event) {
    formCache.init().fetch();
});

Here is a working demo on jsFiddle.

Note: The "cookies reader/writer" script from developer.mozilla.org should be included with the code above. You can also use Yahoo's YUI 2: Cookie Utility which has a useful setSub() method for setting sub-cookies inside a single cookie, for the browser limit that I previously mentioned.

localStorage

You can also use more modern techniques like localStorage (HTML5). It is more secure and faster. All major browsers support this feature including IE 8+. (Additionally, iOS and Android support!)

if (typeof Storage !== 'undefined') { // We have local storage support
    localStorage.username = 'Onur'; // to save to local storage
    document.getElementById('uname').value = localStorage.username; // to fetch from local storage
}

So, just like in the cookies example;

$(window).on('beforeunload', function (event) {
    saveFormToLocalStorage();
    return false;
});

$(document).on('ready', function (event) {
    fillFormFromLocalStorage()
});

SessionStorage

This works pretty much the same way. From W3C: The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session.

Save Form Data to Server/DB via Silent AJAX Post(s):

Not a very efficient way but you might want to use this where others are not feasible. You can make the post on the beforeunload event and prompt a message to the user. 

$(window).on('beforeunload', function (event) {
    //check if at least one field is filled out.
    //make the AJAX post if filled out.
    return "You are leaving the page without submitting the form...";
});

Retrieve Previously Saved Data from Server on Page Load:

Just to remind you; if the user is filling out an "update" form, for example; you can always fetch the previously saved data from the server and automatically fill in the form (non-sensitive fields).

Conclusion

If you really need this and worth the trouble; you should consider a cross-browser solution that implements a fall-back mechanism; such as:

  • IF you have support for HTML5 features; use HTML5 autocomplete attribute. (You can embed the attribute in the HTML beforehand, or set it via Javascript/jQuery when you test for browser support.)
  • ELSE IF you have support for the Storage object; go with localStorage;
  • ELSE IF [cookies your current session stores] + [cookie size your form data needs] < 4096 bytes; then use cookies.
  • ELSE IF you have a server-side web-app make silent AJAX requests to store data on server.
  • ELSE don't do it.

Note: For HTML5 feature detection, take a look at this page or this page or you can use Modernizr.

HTTPS Problem:

The reason, all form changes are gone when using HTTPS is that; it is a secure protocol. Forms are mostly used for user input and can (probably) contain sensitive data. So this behavior seems natural and expected. The solution(s) I offer above will work the same as they do on HTTP. So that should cover all your concerns.

Further reading:

Onur Yıldırım
  • 32,327
  • 12
  • 84
  • 98
  • 4
    One of the best answers i've ever seen on stackexchange :) good job – Wouter Mar 19 '14 at 10:02
  • These are useful alternatives for people who didn't know these existed but it doesn't answer the question. The question is asking for clarification about the built-in browser behavior and why it doesn't work in some situations, not asking how to implement it yourself. I've looked and haven't been able to find a spec for how this works in popular browsers, but I'd love if someone who knows more would post an answer. – danny Jan 17 '17 at 23:22
  • OP asks these questions: "How to keep changed form content", "Why is this happening when using HTTPS?", "How can I prevent this?". I tried to answer all. The "why" part is not that obvious since it highly depends on how the protocol is implemented on a specific browser. But logical reason can be guessed - "sensitive data". For more tech you should refer to IETF specs. – Onur Yıldırım Jan 18 '17 at 12:30
  • I figured out that IOS handles onbeforeunload differently. It won't work on IOS devices therfore. Apple recommends to use the pagehide event instead but I couldn't get my app to work with that either so far... – user2718671 Jun 08 '17 at 12:10
  • I added your code from `http://jsfiddle.net` to my page (added as .js file), but I do not see any difference. The forms keep being empty in firefox after `history.back()` – Matthias Pospiech Nov 15 '17 at 20:09
0

This is what worked for me.

<select
  class="form-select custom-select page-number-select"
  (change)="onPageChange($event)"
  data-test="XXXX"
  [attr.aria-labelledby]="XXXX"
  [value]="pageNumber" <---- This fixed the problem
>
  <ng-container
    *ngFor="let pageNumber of totalPageCount"
  >
    <option value="{{ pageNumber }}" [attr.selected]="pageNumber == page ? '' : null" >
      {{ t('pageN', { pageNumber: pageNumber }) }}
    </option>
   </ng-container>
</select>

Adding the data coming from the stream in the value attribute ensured that the correct value is shown at all times. Even upon browser's popstate events (back and forward button clicks)

shruti gupta
  • 38
  • 5