be-persistent (💾)

be-persistent is a behavior/decorator/enhancement alternative to purr-sist.

Default settings

<input be-persistent>

What this does:

Stores input's value in session storage (key is based on location within the DOM), but can also be specified.

The syntax above is short-hand for:

Explicit Default Settings

<input be-persistent="of value::input via sessionStorage://{autoGenId}.">

The fragment "of value::input" is assumed if not provided.

Also, the event "::input" is assumed if not provided.

The end of the statement above: "sessionStorage://{autoGenId}" is based on the Uniform Storage Path vernacular.

Emoji alternative

<input 💾="of value::input via sessionStorage://{autoGenId}.">

Example 2: Store to IDB

<input 💾="via indexedDB://myDB/myStore/{autoGenId}.">

Example 3: Store to a cookie [TODO]

<input 💾="via cookie://{autoGenId}.">

Example 4: Store to location.hash

<input 💾="via locationHash://{autoGenId}.">

Example 5: Persist unsafe innerHTML

There are certain, limited circumstances, where we want to throw security to the dogs, and provide a convenient way of creating "virtual web pages embedded in the url". Here's how we do this:

<div 💾="of unsanitizedInnerHTML via locationHash://{autoGenId}"
    onsecuritypolicyviolation="event.anythingGoes = true">
    <span conteneditable></span>
</div>

On refreshing the browser, the inner content's edits are retained.

Example 6: Persist safe inner HTML

We make use of trusted types [TODO]

Viewing Your Element Locally

Any web server that can serve static files will do, but...

1. Install git.
2. Fork/clone this repo.
3. Install node.js
4. Install Python 3 or later
5. Open command window to folder where you cloned this repo.

6. npm install

7. npm run serve

8. Open http://localhost:8000/demo/ in a modern browser.

Running Tests

> npm run test

Using from ESM Module:

import 'be-persistent/be-persistent.js';

Using from CDN:

<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-persistent';
</script>