babystore
Version:
Smallest LocalStorage wrapper
160 lines (137 loc) • 4.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Micro Store Test</title>
<link rel="shortcut icon" href="https://fav.farm/💄" type="image/x-icon">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #121314;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.2;
background: whitesmoke
}
main > ul {
display: grid;
grid-template-columns: repeat(auto-fill, 25vw);
grid-auto-rows: 25vw;
gap: 2rem;
}
li {
display: grid;
place-content: center;
background: #dd2244;
width: 100%;
height: 100%;
text-align: center;
transition: background 0.25s ease;
}
li > p {
padding: 2rem;
}
.valid {
background: yellowgreen;
}
</style>
</head>
<body>
<main>
<ul>
<li id="clearRemovesAllItems">
<p>Store.clear removes all items</p>
</li>
<li id="findReturnsFalseIfNotFound">
<p>Store.find returns false if not found</p>
</li>
<li id="deleteRemovesOneProperty">
<p>Store.delete removes one property</p>
</li>
<li id="addAddsObjectProperly">
<p>Store.add adds object Properly</p>
</li>
<li id="allReturnsProperLength">
<p>Store.all length matches the length of localStorage.length</p>
</li>
<li id="hasFindsProperties">
<p>Store.has finds properties</p>
</li>
</ul>
</main>
<script type="module">
import { store, storeAsync } from './dist/index.min.js';
localStorage.clear();
const prefix = '$prefix:';
/** Start Store Tests */
let s = store(prefix);
localStorage.setItem('key', 'testing');
const lengthBefore = localStorage.length;
s.clear();
const lengthAfter = localStorage.length;
clearRemovesAllItems.classList.toggle('valid', lengthBefore !== lengthAfter);
const result = s.add('John', {
name: 'John Johnerson',
firstName: 'John',
lastName: 'Johnerson'
});
const hasJohn = s.has('John');
hasFindsProperties.classList.toggle('valid', hasJohn);
let janeShouldBeFalse = s.find('Jane');
findReturnsFalseIfNotFound.classList.toggle('valid', !janeShouldBeFalse);
s.add('Jane', {
name: 'Jane Jillerson',
firstName: 'Jane',
lastName: 'Jillerson',
ppi: {
ssn: 222222222,
phone: 5555555555,
email: 'email@example.com',
details: {
a: {}
}
}
});
let janeShouldBeObject = s.find('Jane');
let janeType = toString.call(janeShouldBeObject)[8] === 'O';
addAddsObjectProperly.classList.toggle('valid', janeType);
s.add('Jane', {
ppi: {
email: 'email2@example.com',
details: {
b: {}
}
}
});
allReturnsProperLength.classList.toggle('valid', s.all().length === localStorage.length)
const hasJaneProperties = s.has('Jane', 'ppi', 'details', 'b');
console.log(hasJaneProperties);
s.delete('Jane');
deleteRemovesOneProperty.classList.toggle('valid', !s.has('Jane'));
const addItemAsync = async () => {
await new Promise(res => setTimeout(res, 1000))
const a = await storeAsync('Clare', {
name: 'Clare',
fullName: 'Clare Clarity',
phone: '555-555-5555'
});
console.log(a.find('Clare'));
}
addItemAsync();
/*
try {
const JanePPIDetails = JSON.parse(localStorage.getItem(prefix+'Jane')).ppi.details;
if (hasJane && 'b' in JanePPIDetails) {
hasFindsProperties.classList.toggle('valid', true);
}
} catch(err) {
hasFindsProperties.classList.toggle('valid', false);
}
*/
</script>
</body>
</html>