be-persistent
v0.0.30
Published
be-persistent is a behavior/decorator that provides persistence storage to native DOM and custom elements.
Downloads
80
Maintainers
Readme
be-persistent [TODO]
be-persistent is a behavior/decorator/enhancement alternative to purr-sist.
Example 1: 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:
<input be-persistent='{
"what":{
"value": true
},
"when":{
"input": true
},
"where":{
"sessionStorage": true,
"autogenId": true,
},
"restoreIf":{
"always": true,
}
}'>
Example 2: Store to IDB
<input be-persistent='{
"where":{
"idb": true
}
}'>
Example 3: Persist on unload
<div contenteditable=true be-persistent='{
"what":{
"innerText": true
},
"persistOnUnload": true
}'>hello</div>
Example 4: Persist innerHTML:
<form
action="https://o2h-cw.bahrus.workers.dev/"
target='[-innerHTML]'
be-persistent='{
"where":{
"idb": true
},
"what":{
"innerHTML": {
"beBeatified": true
}
},
"persistOnUnload": true
}'
be-reformable='{
"autoSubmit": false,
"path": ["", "proxy-to"]
}'
be-valued
>
<label>
Proxy to:
<input required name='proxy-to' type='url'>
</label>
<label be-typed be-clonable be-delible></label>
<button type='submit'>Submit</button>
</form>
<div -innerHTML></div>
<script type="module" crossorigin="anonymous" >
import "https://esm.run/[email protected]";
import "https://esm.run/[email protected]";
import "https://esm.run/[email protected]";
import "https://esm.run/[email protected]";
import "https://esm.run/[email protected]";
import "https://esm.run/[email protected]"
</script>
On refreshing the browser, the input's value is retained.
Example tbd: Criteria [TODO]
<input be-persistent='{
"restoreIf":{
"value":{
"eq": "defaultValue"
}
}
}'>
Example 5: Persist to url hash
<input be-persistent='{
"where":{
"idb": true,
"hash": true
}
}'>
Precedence
If multiple locations are selected as far as where to persist data, the data is persisted to all of them. But as far as restoring state from the persisted data, which one takes precedence?
If IDB is enabled, and the data is found that, that is what takes precedence. If SessionState is enabled (which it is by default, unless specifically turned off) then it takes precedence. If hash is enabled, it takes the next precedence.