feat: ✨ add wrapper around sessionStorage API
The native 'storage' event does not fire on the same browsing context if a change to the store happens, so wrapping the sessionStorage API is necessary to work around this limitation
This commit is contained in:
parent
031d698949
commit
e8f7d61ed0
2 changed files with 71 additions and 0 deletions
70
src/components/head/page-head-script.webc
Normal file
70
src/components/head/page-head-script.webc
Normal file
|
@ -0,0 +1,70 @@
|
|||
<script>
|
||||
const storageHandler = {
|
||||
get(target, prop) {
|
||||
switch (prop) {
|
||||
case 'setItem':
|
||||
return function (...args) {
|
||||
const [key, value] = args;
|
||||
// Add additional logic here, such as logging or validation
|
||||
console.log(`Setting key "${key}" to value "${value}"`);
|
||||
updateDom(key, value);
|
||||
target[key] = value;
|
||||
};
|
||||
|
||||
case 'getItem':
|
||||
return function (...args) {
|
||||
const [key] = args;
|
||||
// Add additional logic here, such as logging or validation
|
||||
console.log(`Getting key "${key}"`);
|
||||
return target[key];
|
||||
};
|
||||
|
||||
case 'removeItem':
|
||||
return function (...args) {
|
||||
const [key] = args;
|
||||
// Add additional logic here, such as logging or validation
|
||||
console.log(`Removing key "${key}"`);
|
||||
delete target[key];
|
||||
};
|
||||
|
||||
case 'clear':
|
||||
return function () {
|
||||
// Add additional logic here, such as logging or validation
|
||||
console.log('Clearing all sessionStorage');
|
||||
for (let key in target) {
|
||||
if (target.hasOwnProperty(key)) {
|
||||
delete target[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
default:
|
||||
return target[prop];
|
||||
}
|
||||
},
|
||||
set(target, prop, value) {
|
||||
// Add additional logic here, such as validation or constraints
|
||||
console.log(`Setting key "${prop}" to value "${value}"`);
|
||||
target[prop] = value;
|
||||
return true;
|
||||
},
|
||||
deleteProperty(target, prop) {
|
||||
// Add additional logic here, such as logging or validation
|
||||
console.log(`Deleting key "${prop}"`);
|
||||
delete target[prop];
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const storeProxy = new Proxy(sessionStorage, storageHandler);
|
||||
|
||||
const updateDom = (key, value) => {
|
||||
if (key === 'isHorny') {
|
||||
value ? document.body.classList.add('nsfw') : document.body.classList.remove('nsfw');
|
||||
}
|
||||
};
|
||||
|
||||
// Usage example:
|
||||
storeProxy.getItem('isHorny') === 'true'
|
||||
? document.body.classList.add('nsfw')
|
||||
: document.body.classList.remove('nsfw');
|
||||
</script>
|
|
@ -9,6 +9,7 @@
|
|||
<template webc:is="page-head-fonts" webc:nokeep></template>
|
||||
<template webc:is="page-head-colors" webc:nokeep></template>
|
||||
<template webc:is="page-head-style" webc:nokeep></template>
|
||||
<template webc:is="page-head-script" webc:nokeep></template>
|
||||
|
||||
<link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
|
||||
<script type="module" :src="getBundleFileUrl('js')" webc:keep></script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue