github/session-resume

Annotate fields to be persisted on navigation away from the current page

Session Resume

Annotate fields to be persisted on navigation away from the current page. Fields will be automatically restored when the user revisits the page again in their current browser session (excludes separate tabs).

Not designed for persisted crash recovery.

Installation

$ npm install @github/session-resume

Usage

HTML

<form>
  <input id="new-comment" class="js-session-resumable"/>
</form>

JS

import {persistResumableFields, restoreResumableFields, setForm} from '@github/session-resume'

function getPageID() {
  return window.location.pathname
}

// Listen for all form submit events and to see if their default submission
// behavior is invoked.
window.addEventListener('submit', setForm, {capture: true})

// Resume field content on regular page loads.
window.addEventListener('pageshow', function() {
  restoreResumableFields(getPageID())
})

// Persist resumable fields when page is unloaded
window.addEventListener('pagehide', function() {
  persistResumableFields(getPageID())
})

restoreResumableFields(id: string, options)

The restoreResumableFields(id: string, options) function supports optional configurations:

• storage: - Storage instance (defaults to window.sessionStorage)
• keyPrefix: - string prepended onto the storage key (defaults to "session-resume")

persistResumableFields(id: string, options)

The persistResumableFields(id: string, options) function supports optional configurations:

• storage: - Storage instance (defaults to window.sessionStorage)
• storageFilter: - (field: HTMLInputElement | HTMLTextAreaElement) => boolean predicate to determine whether or not to store a field (defaults to (field) => field.checked !== field.defaultChecked) for checkbox and radio buttons, (field) => field.value !== field.defaultValue otherwise)
• keyPrefix: - string prepended onto the storage key (defaults to "session-resume")
• scope: - ParentNode used to query field elements (defaults to document)
• selector: - string used to query field elements (defaults to ".js-session-resumable")
• fields: - NodeList | Node[] provide field elements as an alternative to querying (defaults to options.scope.querySelectorAll(options.selector))

Note: When fields is specified, scope and selectors will be ignored.

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

session-resume's Issues

.

Session resume appears to be broken for me

session-resume on an issue comment for example doesn't seem to be working for me properly in chrome and I just lost a bunch of text from accidentally closing a tab :(

These things work

1. Type in an issue comment, refresh the tab, text is still there
2. Type in an issue comment, close the tab, reopen with cmd-shift-t, text is still there

I suspect the browser is doing this though, rather than session-resume.

This does not work

1. Type in an issue comment, close the tab, open a new tab, navigate to issue url - issue comment box is empty.
2. Have two tabs to github.com, in one type in an issue comment box, close the tab. In the other sessionStorage is still empty.

Session resume is broken on the issues page

Bug

• Create new Issue, enter Issue title and description
• Close tab and re-open using Undo Close Tab:
• The description gets repopulated but the title does not

Solution

Removing autocomplete from the title input attribute seems to fix the bug, I figured I'd open an issue here so we can take a look at why the autocomplete attribute seems to be wiping the title field when a closed tab is re-opened