Restore scroll position, form state, and focus

[adamchainz]

Description

@kezabelle's django-livereloadish does this by restoring these key pieces of state after reload. It serializes the values into sessionStorage and restores them on page load.

I think this behaviour would be valuable to add here. Probably a good idea to add one at a time.

[adamchainz]

Firefox restores scroll position and form data, but not focus.

Chrome doesn't seem to restore any.

I'm tempted to just restore focus and document "use firefox" for the other stuff.

[boxed]

I use this at work to restore scroll position:

    window.addEventListener("beforeunload", function (e) {
        sessionStorage.setItem('scroll_pos', window.scrollY);
        sessionStorage.setItem('scroll_url', window.location.href);
    });


document.addEventListener("DOMContentLoaded", function (event) {
    let scroll_pos = sessionStorage.getItem('scroll_pos');
    if (scroll_pos) {
        if (sessionStorage.getItem('scroll_url') === window.location.href) {
            window.scrollTo(0, scroll_pos);
        }
        sessionStorage.removeItem('scroll_pos');
    }
});

It works extremely well, almost gets my entire site to feel like a SPA.

Form state and focus seems more like a nice-to-have compared to scroll position imo