localStorage, sessionStorage und IndexedDB

const label = document.querySelector("#theme");

function show(theme) {
  document.body.className = theme;
  label.textContent = "Theme: " + theme;
}

show(localStorage.getItem("theme") ?? "light");

for (const theme of ["light", "dark"]) {
  document.querySelector("#" + theme).addEventListener("click", () => {
    show(theme);
  });
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';

const text = (page, selector) => page.document.querySelector(selector).textContent;
const click = (page, selector) => page.document.querySelector(selector).click();

test('Without a saved theme the page shows light', async () => {
  const page = await loadPage();
  assert.equal(text(page, '#theme'), 'Theme: light', `the page shows ${text(page, '#theme')}`);
});

test('A saved theme is shown on load', async () => {
  const page = await loadPage({localStorage: {theme: 'dark'}});
  assert.equal(text(page, '#theme'), 'Theme: dark', `the page shows ${text(page, '#theme')}`);
});

test('The chosen theme is still there after a reload', async () => {
  const page = await loadPage();
  click(page, '#dark');
  assert.equal(page.window.localStorage.getItem('theme'), 'dark', `localStorage has theme ${page.window.localStorage.getItem('theme')}`);
  const reloaded = await loadPage({localStorage: page.window.localStorage});
  assert.equal(text(reloaded, '#theme'), 'Theme: dark', `after a reload the page shows ${text(reloaded, '#theme')}`);
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Theme</title>
</head>
<body>
  <p id="theme"></p>
  <button id="light" type="button">Light</button>
  <button id="dark" type="button">Dark</button>
  <script type="module" src="main.js"></script>
</body>
</html>

{
  "type": "module"
}

const list = document.querySelector("#books");
const input = document.querySelector("#title");

function load() {
  try {
    return JSON.parse(localStorage.getItem("books")) ?? [];
  } catch {
    return []; // a broken value: start again
  }
}

function render(books) {
  list.replaceChildren(...books.map((title) => {
    const item = document.createElement("li");
    item.textContent = title;
    return item;
  }));
}

const books = load();
render(books);

document.querySelector("#add").addEventListener("click", () => {
  books.push(input.value);
  localStorage.setItem("books", books);
  render(books);
  input.value = "";
});

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';

const text = (page, selector) => page.document.querySelector(selector).textContent;
const click = (page, selector) => page.document.querySelector(selector).click();

const titles = (page) => [...page.document.querySelectorAll('#books li')].map((item) => item.textContent);
function add(page, title) {
  page.document.querySelector('#title').value = title;
  click(page, '#add');
}

test('Saved books are shown on load', async () => {
  const page = await loadPage({localStorage: {books: '["Dune","Emma"]'}});
  assert.deepEqual(titles(page), ['Dune', 'Emma'], `the list shows ${JSON.stringify(titles(page))}`);
});

test('A broken saved value gives an empty list', async () => {
  const page = await loadPage({localStorage: {books: '{oops'}});
  assert.deepEqual(titles(page), [], `the list shows ${JSON.stringify(titles(page))}`);
});

test('Added books are saved as JSON and survive a reload', async () => {
  const page = await loadPage();
  add(page, 'Dune');
  add(page, 'Emma');
  const saved = page.window.localStorage.getItem('books');
  assert.equal(saved, '["Dune","Emma"]', `localStorage has books = ${saved}`);
  const reloaded = await loadPage({localStorage: page.window.localStorage});
  assert.deepEqual(titles(reloaded), ['Dune', 'Emma'], `after a reload the list shows ${JSON.stringify(titles(reloaded))}`);
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Reading list</title>
</head>
<body>
  <input id="title" aria-label="Title">
  <button id="add" type="button">Add</button>
  <ul id="books"></ul>
  <script type="module" src="main.js"></script>
</body>
</html>

{
  "type": "module"
}

const output = document.querySelector("#count");
let count = localStorage.getItem("count") ?? 0;
output.textContent = count;

document.querySelector("#more").addEventListener("click", () => {
  count = count + 1;
  localStorage.setItem("count", count);
  output.textContent = count;
});

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';

const text = (page, selector) => page.document.querySelector(selector).textContent;
const click = (page, selector) => page.document.querySelector(selector).click();

test('A new page starts at 0 and counts to 1', async () => {
  const page = await loadPage();
  assert.equal(text(page, '#count'), '0', `at the start the page shows ${text(page, '#count')}`);
  click(page, '#more');
  assert.equal(text(page, '#count'), '1', `after one click the page shows ${text(page, '#count')}`);
});

test('A saved count of 4 goes on with 5', async () => {
  const page = await loadPage({localStorage: {count: '4'}});
  click(page, '#more');
  assert.equal(text(page, '#count'), '5', `after one click the page shows ${text(page, '#count')}`);
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counter</title>
</head>
<body>
  <p id="count"></p>
  <button id="more" type="button">+1</button>
  <script type="module" src="main.js"></script>
</body>
</html>

{
  "type": "module"
}