be-persistent v0.0.31

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>