了解浏览器中的不同存储类型

<input><label>Dark theme</label><br>

let db;function toggle(on) {  if (on) {    document.documentElement.classList.add('dark');   } else {    document.documentElement.classList.remove('dark');      }}async function save(on) {  const tx = db.transaction('preferences', 'readwrite');  const store = tx.objectStore('preferences');  store.put({key: 'darkTheme', value: on});  return tx.complete;}async function load() {  const tx = db.transaction('preferences', 'readonly');  const store = tx.objectStore('preferences');  const data = await store.get('darkTheme');  return data && data.value;}async function onChange(checkbox) {  const value = checkbox.checked;  toggle(value);  await save(value);}function openDatabase() {  return idb.openDB('my-db', 1, {    upgrade(db) {      db.createObjectStore('preferences', {keyPath: 'key'});    },  });}openDatabase()  .then((_db) => {    db = _db;    return load();  })  .then((initialValue) => {    toggle(initialValue);    document.querySelector('#darkTheme').checked = initialValue;  });

<p>loading...</p>

let db;async function loadPokemons() {  const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10');  const data = await res.json();  return data.results;}function removeLoading() {  const elem = document.querySelector('#loading');  if (elem) {    elem.parentNode.removeChild(elem);   }}function appendPokemon(pokemon) {  const node = document.createElement('li');  const textnode = document.createTextNode(pokemon.name);  node.appendChild(textnode);  document.querySelector('#list').appendChild(node);}function clearList() {  const list = document.querySelector('#list');  while (list.firstChild) {    list.removeChild(list.lastChild);  }}function saveToCache(pokemons) {  const tx = db.transaction('pokemons', 'readwrite');  const store = tx.objectStore('pokemons');  pokemons.forEach(pokemon => store.put(pokemon));  return tx.complete;}function loadFromCache() {  const tx = db.transaction('pokemons', 'readonly');  const store = tx.objectStore('pokemons');  return store.getAll();}function openDatabase() {  return idb.openDB('my-db2', 1, {    upgrade(db) {      db.createObjectStore('pokemons', {keyPath: 'name'});    },  });}openDatabase()  .then((_db) => {    db = _db;    return loadFromCache();  })  .then((cachedPokemons) => {    if (cachedPokemons) {      removeLoading();      cachedPokemons.forEach(appendPokemon);      console.log('loaded from cache!');    }    return loadPokemons();  })  .then((pokemons) => {    removeLoading();    saveToCache(pokemons);    clearList();    pokemons.forEach(appendPokemon);    console.log('loaded from network!');  });

function getCookie(cname) {  const name = cname + '=';  const decoded = decodeURIComponent(document.cookie);  const split = decoded.split(';');  const relevantCookie = split.find((cookie) => cookie.indexOf(`${cname}=`) === 0);  if (relevantCookie) {    return relevantCookie.split('=')[1];  }  return null;}function toggle(on) {  if (on) {    document.documentElement.classList.add('dark');   } else {    document.documentElement.classList.remove('dark');      }}function save(on) {  document.cookie = `dark_theme=${on.toString()}; max-age=31536000; SameSite=None; Secure`;}function load() {  return getCookie('dark_theme') === 'true';}function onChange(checkbox) {  const value = checkbox.checked;  toggle(value);  save(value);}const initialValue = load();toggle(initialValue);document.querySelector('#darkTheme').checked = initialValue;

key1=value1;key2=value2;key3=value3

function toggle(on) {  if (on) {    document.documentElement.classList.add('dark');   } else {    document.documentElement.classList.remove('dark');      }}function save(on) {  const params = new URLSearchParams(window.location.search);  params.set('dark_theme', on.toString());  history.pushState(null, null, `?${params.toString()}`);}function load() {  const params = new URLSearchParams(window.location.search);  return params.get('dark_theme') === 'true';}function onChange(checkbox) {  const value = checkbox.checked;  toggle(value);  save(value);}const initialValue = load();toggle(initialValue);document.querySelector('#darkTheme').checked = initialValue;

<p>Select page:</p><p>  <button>0</button>  <button>1</button>  <button>3</button>  <button>4</button>  <button>5</button></p>

async function loadPokemons(page) {  const res = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=10&offset=${page * 10}`);  const data = await res.json();  return data.results;}function appendPokemon(pokemon) {  const node = document.createElement('li');  const textnode = document.createTextNode(pokemon.name);  node.appendChild(textnode);  document.querySelector('#list').appendChild(node);}function clearList() {  const list = document.querySelector('#list');  while (list.firstChild) {    list.removeChild(list.lastChild);  }}function savePage(page) {  const params = new URLSearchParams(window.location.search);  params.set('page', page.toString());  history.pushState(null, null, `?${params.toString()}`);}function loadPage() {  const params = new URLSearchParams(window.location.search);  if (params.has('page')) {    return parseInt(params.get('page'));  }  return 0;}async function updatePage(page) {  clearList();  savePage(page);  const pokemons = await loadPokemons(page);  pokemons.forEach(appendPokemon);}const page = loadPage();updatePage(page);