Create svelte stores and sync thier values with location.hash
.
Install with
npm i -D svelte-anchorable
and use like so
// $lib/store_show_description.js
import { anchorable } from 'svelte-anchorable';
export let store_show_description = anchorable('store_show_description', false);
<script>
// +page.svelte
import { store_show_description } from '$lib/store_show_description.js';
setTimeout(function () {
$store_show_description = true;
}, 2000);
</script>
<h1>Welcome to your library project</h1>
{#if $store_show_description}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Itaque vel laborum obcaecati, quos hic repudiandae enim odio nulla
explicabo minus, nam ipsum, possimus voluptatem amet saepe ipsam!
Quos accusamus a eum.Deleniti aspernatur veniam sed itaque ratione
exercitationem dolore porro! Nemo consectetur eius placeat labore
sit eligendi distinctio ad, totam, illum quos maxime cupiditate
repellat a vero minima unde ipsa dolorum dolorem ullam quaerat?
Asperiores earum repellat ratione animi voluptates dolor accusamus
minima possimus? Consectetur aliquam nisi eum illum, repudiandae
eligendi quas ipsa, quisquam nulla neque fugit porro assumenda
reprehenderit molestias enim suscipit architecto ipsum nesciunt
dignissimos maiores rem amet?</p>
{/if}
You're not limited to primitives, you can serialize whole objects
<script>
// +page.svelte
import { store_show_description } from '$lib/store_show_description.js';
setTimeout(function () {
$store_show_description = {
title: 'this is a description',
content: 'hello from description'
};
}, 2000);
</script>
<h1>Welcome to your library project</h1>
{#if $store_show_description}
<h3>{$store_show_description.title}</h3>
<p>{$store_show_description.content}</p>
{/if}