Counter with LocalStorage - Svelte Typing CST Test
Loading…
Counter with LocalStorage — Svelte Code
Persists counter value using localStorage in Svelte.
<script>
let count = parseInt(localStorage.getItem('count') || '0', 10);
function increment() { count += 1; localStorage.setItem('count', count); }
function decrement() { count -= 1; localStorage.setItem('count', count); }
function reset() { count = 0; localStorage.setItem('count', count); }
</script>
<h2>Counter: {count}</h2>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>
<button on:click={reset}>Reset</button>Svelte Language Guide
Svelte is a modern, component-based JavaScript framework that shifts work from the browser to the build step. Instead of using a virtual DOM, Svelte compiles components into highly optimized vanilla JavaScript, delivering faster performance and smaller bundles.
Primary Use Cases
- ▸Single-page applications (SPAs)
- ▸Highly interactive UI widgets
- ▸Performance-critical front-end apps
- ▸Progressive web apps (PWAs)
- ▸Embeddable components for websites
Notable Features
- ▸Compile-time reactivity (no virtual DOM)
- ▸Component-based architecture
- ▸SvelteKit for routing, SSR, and full-stack apps
- ▸Built-in stores for state management
- ▸CSS scoped by default
Origin & Creator
Created in 2016 by Rich Harris, a graphics editor at The Guardian, aiming to simplify reactive UI development.
Industrial Note
Svelte is highly suited for performance-sensitive web apps, small-to-medium SPAs, interactive widgets, and animation-heavy projects.
More Svelte Typing Exercises
Svelte Counter ComponentSvelte Counter with Reactive StatementSvelte Counter with Theme Toggle and Computed ClassSvelte Counter with Derived StateSvelte Counter with Event DispatchSvelte Counter with Slot ControlsSvelte Counter with Reactive ThemeSvelte Counter with Lifecycle HookSvelte Counter with Two-way Binding