Objectif : une mini-boutique où le panier survit au rechargement, présente dans plusieurs onglets, avec une mention de session.
- Un catalogue de produits affiché depuis une donnée locale.
- Un panier conservé dans localStorage et synchronisé entre onglets (storage event).
- Un cookie de session rappelle l’heure de la dernière visite.
- Le tout en runes Svelte 5, d’abord sans TS puis avec lang="ts".
src/routes/+page.sveltesvelte
<script>
import { onMount } from 'svelte'
let produits = $state([
{ id: 1, nom: 'Livre', prix: 12 },
{ id: 2, nom: 'Cahier', prix: 3 },
{ id: 3, nom: 'Stylo', prix: 2 }
])
let panier = $state(JSON.parse(localStorage.getItem('panier') ?? '[]'))
onMount(() => {
const sync = (e) => {
if (e.key === 'panier') panier = JSON.parse(e.newValue ?? '[]')
}
window.addEventListener('storage', sync)
return () => window.removeEventListener('storage', sync)
})
function ajouter(produit) {
panier = [...panier, produit.id]
localStorage.setItem('panier', JSON.stringify(panier))
}
</script>
{#each produits as p (p.id)}
<button onclick={() => ajouter(p)}>{p.nom} — {p.prix} €</button>
{/each}
<p>Panier : {panier.length} article(s)</p>