-
Notifications
You must be signed in to change notification settings - Fork 0
/
+page.svelte
68 lines (57 loc) · 1.58 KB
/
+page.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script lang="ts">
import { localStore, sessionStore } from '$lib/index';
const local = localStore('content', 'local');
const session = sessionStore('content', 5);
</script>
<main>
<h1>svelte-persistent</h1>
<h3><a href="https://github.com/LeoDog896/svelte-persistent">github</a> | <a href="https://npmjs.com/package/svelte-persistent">npm</a></h3>
<p>ridiculously simple svelte writable persistence: SvelteKit first, with Svelte support</p>
<p><code>npm i -D svelte-persistent</code></p>
<p>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">Local:</a>
<input bind:value={$local} />
</p>
<p>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage">Session:</a>
<input type="number" bind:value={$session} />
</p>
<pre><code
>{`import {
localStore, sessionStore
} from '$lib/index';
// key, default value if none loaded.
const local = localStore('content', 'local');
const session = sessionStore('content', 'session');`}</code
></pre>
<p>
You can use any serializable into JSON object, not just strings. The input above is bound to a
number, but the store is a string.
</p>
<p>
<a href="https://github.com/LeoDog896/svelte-persistent/blob/main/src/routes/%2Bpage.svelte">View this page's source</a>
</p>
</main>
<style>
pre {
font-family: monospace;
background-color: #eee;
padding: 0.5rem;
text-align: left;
}
main {
margin: 7rem;
}
@media (max-width: 800px) {
main {
margin: 4px;
text-align: center;
}
}
h1,
h3,
p,
input {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
</style>