#localstorage code explainers

javascript

const STORAGE_KEY = "theme-preference";
 
function getSystemTheme() {
  return window.matchMedia("(prefers-color-scheme: dark)").matches

Building a dark-mode toggle that respects the OS

dark-mode localstorage matchmedia

Intermediate 8 steps

typescript

type CountdownState = {
  deadline: number;
  onTick: (remaining: number) => void;
  onComplete: () => void;

A countdown timer that survives reloads

persistence timers localstorage

Intermediate 10 steps

javascript

import { createContext, useContext, useEffect, useState, useCallback } from 'react';
 
const ThemeContext = createContext(null);

Building a theme provider with React Context

context hooks dark-mode

Intermediate 9 steps

javascript

const STORAGE_KEY = "app_state";
const CURRENT_VERSION = 3;
 
const migrations = {

Versioned state migrations in localStorage

migrations persistence versioning

Intermediate 9 steps

javascript

import { useState, useEffect, useCallback, useRef } from "react";
 
export function usePersistentForm(storageKey, initialValues) {
  const [values, setValues] = useState(() => {

A React hook that persists form state to localStorage

custom-hooks localstorage debounce

Intermediate 9 steps