Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Created May 28, 2022 20:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/4b4cfd5c2df125899752da1a7e59d481 to your computer and use it in GitHub Desktop.
Save nolanlawson/4b4cfd5c2df125899752da1a7e59d481 to your computer and use it in GitHub Desktop.
Download ZIP
Test BF Cache
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Test BF Cache</title>
<style>
body {
margin-top: 15vh;
margin-bottom: 300vh;
}
#theSubScroller {
max-height: 100px;
overflow-y: auto;
border: 1px solid gray;
}
.section {
margin: 20px 0;
}
main {
max-width: 600px;
margin: 0 auto;
}
button {
margin: 10px;
padding: 5px;
font-size: 0.9rem;
}
input[type=text] {
font-size: 0.9rem;
width: 500px;
}
</style>
</head>
<body>
<main>
<h1>Test BF Cache</h1>
<p>
This page sets state in various ways: JavaScript state, DOM state, and document scroll state (scroll down).
You can test the BF cache by clicking this link and then using the browser Back button:
</p>
<div>
<a href="./other.html">Go to other page</a>
</div>
<br/>
<div class="section">
<h2>JavaScript heap state</h2>
<div><button id="theIncrement">Increment count</button></div>
<div><button id="theCountReveal">Click to reveal count</button></div>
<div>Clicked <span id="theCount">0</span> times</div>
</div>
<div class="section">
<h2>DOM state</h2>
<div><button id="theDomStateSetter">Set random state</button></div>
</div>
<div class="section">
Random number is <span id="theRando"></span>
</div>
<div class="section">
<label>
Checkbox:
<input type="checkbox" id="theCheckbox">
</label>
</div>
<div class="section">
<label>
Text input:
<input type="text" id="theInput">
</label>
</div>
<div class="section">
<div>Subscroller:</div>
<div id="theSubScroller">
<ul>
<li>abomasnow</li>
<li>abra</li>
<li>absol</li>
<li>accelgor</li>
<li>aegislash</li>
<li>aerodactyl</li>
<li>aggron</li>
<li>aipom</li>
<li>alakazam</li>
<li>alomomola</li>
<li>altaria</li>
<li>amaura</li>
<li>ambipom</li>
<li>amoonguss</li>
<li>ampharos</li>
<li>anorith</li>
<li>arbok</li>
<li>arcanine</li>
<li>arceus</li>
<li>archen</li>
<li>archeops</li>
<li>ariados</li>
<li>armaldo</li>
<li>aromatisse</li>
<li>aron</li>
<li>articuno</li>
<li>audino</li>
<li>aurorus</li>
<li>avalugg</li>
<li>axew</li>
<li>azelf</li>
<li>azumarill</li>
<li>azurill</li>
<li>bagon</li>
<li>baltoy</li>
<li>banette</li>
<li>barbaracle</li>
<li>barboach</li>
<li>basculin</li>
<li>bastiodon</li>
<li>bayleef</li>
<li>beartic</li>
<li>beautifly</li>
<li>beedrill</li>
<li>beheeyem</li>
<li>beldum</li>
<li>bellossom</li>
<li>bellsprout</li>
<li>bergmite</li>
<li>bibarel</li>
<li>bidoof</li>
<li>binacle</li>
<li>bisharp</li>
<li>blastoise</li>
<li>blaziken</li>
<li>blissey</li>
<li>blitzle</li>
<li>boldore</li>
<li>bonsly</li>
<li>bouffalant</li>
<li>braixen</li>
<li>braviary</li>
<li>breloom</li>
<li>bronzong</li>
<li>bronzor</li>
<li>budew</li>
<li>buizel</li>
<li>bulbasaur</li>
<li>buneary</li>
<li>bunnelby</li>
<li>burmy</li>
<li>butterfree</li>
<li>cacnea</li>
<li>cacturne</li>
<li>camerupt</li>
<li>carbink</li>
<li>carnivine</li>
<li>carracosta</li>
<li>carvanha</li>
<li>cascoon</li>
<li>castform</li>
<li>caterpie</li>
<li>celebi</li>
<li>chandelure</li>
<li>chansey</li>
<li>charizard</li>
<li>charmander</li>
<li>charmeleon</li>
<li>chatot</li>
<li>cherrim</li>
<li>cherubi</li>
<li>chesnaught</li>
<li>chespin</li>
<li>chikorita</li>
<li>chimchar</li>
<li>chimecho</li>
<li>chinchou</li>
<li>chingling</li>
<li>cinccino</li>
<li>clamperl</li>
<li>clauncher</li>
<li>clawitzer</li>
<li>claydol</li>
<li>clefable</li>
<li>clefairy</li>
<li>cleffa</li>
<li>cloyster</li>
<li>cobalion</li>
<li>cofagrigus</li>
<li>combee</li>
<li>combusken</li>
<li>conkeldurr</li>
<li>corphish</li>
<li>corsola</li>
<li>cottonee</li>
<li>cradily</li>
<li>cranidos</li>
<li>crawdaunt</li>
<li>cresselia</li>
<li>croagunk</li>
<li>crobat</li>
<li>croconaw</li>
<li>crustle</li>
<li>cryogonal</li>
<li>cubchoo</li>
<li>cubone</li>
<li>cyndaquil</li>
<li>darkrai</li>
<li>darmanitan</li>
<li>darumaka</li>
<li>dedenne</li>
<li>deerling</li>
<li>deino</li>
<li>delcatty</li>
<li>delibird</li>
<li>delphox</li>
<li>deoxys</li>
<li>dewgong</li>
<li>dewott</li>
<li>dialga</li>
<li>diancie</li>
<li>diggersby</li>
<li>diglett</li>
<li>ditto</li>
<li>dodrio</li>
<li>doduo</li>
<li>donphan</li>
<li>doublade</li>
<li>dragalge</li>
<li>dragonair</li>
<li>dragonite</li>
<li>drapion</li>
<li>dratini</li>
<li>drifblim</li>
<li>drifloon</li>
<li>drilbur</li>
<li>drowzee</li>
<li>druddigon</li>
<li>ducklett</li>
<li>dugtrio</li>
<li>dunsparce</li>
<li>duosion</li>
<li>durant</li>
<li>dusclops</li>
<li>dusknoir</li>
<li>duskull</li>
<li>dustox</li>
<li>dwebble</li>
<li>eelektrik</li>
<li>eelektross</li>
<li>eevee</li>
<li>ekans</li>
<li>electabuzz</li>
<li>electivire</li>
<li>electrike</li>
<li>electrode</li>
<li>elekid</li>
<li>elgyem</li>
<li>emboar</li>
<li>emolga</li>
<li>empoleon</li>
<li>entei</li>
<li>escavalier</li>
<li>espeon</li>
<li>espurr</li>
<li>excadrill</li>
<li>exeggcute</li>
<li>exeggutor</li>
<li>exploud</li>
<li>farfetch'd</li>
<li>fearow</li>
<li>feebas</li>
<li>fennekin</li>
<li>feraligatr</li>
<li>ferroseed</li>
<li>ferrothorn</li>
<li>finneon</li>
<li>flaaffy</li>
<li>flabébé</li>
<li>flareon</li>
<li>fletchinder</li>
<li>fletchling</li>
<li>floatzel</li>
<li>floette</li>
<li>florges</li>
<li>flygon</li>
<li>foongus</li>
<li>forretress</li>
<li>fraxure</li>
<li>frillish</li>
<li>froakie</li>
<li>frogadier</li>
<li>froslass</li>
<li>furfrou</li>
<li>furret</li>
<li>gabite</li>
<li>gallade</li>
<li>galvantula</li>
<li>garbodor</li>
<li>garchomp</li>
<li>gardevoir</li>
<li>gastly</li>
<li>gastrodon</li>
<li>genesect</li>
<li>gengar</li>
<li>geodude</li>
<li>gible</li>
<li>gigalith</li>
<li>girafarig</li>
<li>giratina</li>
<li>glaceon</li>
<li>glalie</li>
<li>glameow</li>
<li>gligar</li>
<li>gliscor</li>
<li>gloom</li>
<li>gogoat</li>
<li>golbat</li>
<li>goldeen</li>
<li>golduck</li>
<li>golem</li>
<li>golett</li>
<li>golurk</li>
<li>goodra</li>
<li>goomy</li>
<li>gorebyss</li>
<li>gothita</li>
<li>gothitelle</li>
<li>gothorita</li>
<li>gourgeist</li>
<li>granbull</li>
<li>graveler</li>
<li>greninja</li>
<li>grimer</li>
<li>grotle</li>
<li>groudon</li>
<li>grovyle</li>
<li>growlithe</li>
<li>grumpig</li>
<li>gulpin</li>
<li>gurdurr</li>
<li>gyarados</li>
<li>happiny</li>
<li>hariyama</li>
<li>haunter</li>
<li>hawlucha</li>
<li>haxorus</li>
<li>heatmor</li>
<li>heatran</li>
<li>heliolisk</li>
<li>helioptile</li>
<li>heracross</li>
<li>herdier</li>
<li>hippopotas</li>
<li>hippowdon</li>
<li>hitmonchan</li>
<li>hitmonlee</li>
<li>hitmontop</li>
<li>honchkrow</li>
<li>honedge</li>
<li>ho-oh</li>
<li>hoopa</li>
<li>hoothoot</li>
<li>hoppip</li>
<li>horsea</li>
<li>houndoom</li>
<li>houndour</li>
<li>huntail</li>
<li>hydreigon</li>
<li>hypno</li>
<li>igglybuff</li>
<li>illumise</li>
<li>infernape</li>
<li>inkay</li>
<li>ivysaur</li>
<li>jellicent</li>
<li>jigglypuff</li>
<li>jirachi</li>
<li>jolteon</li>
<li>joltik</li>
<li>jumpluff</li>
<li>jynx</li>
<li>kabuto</li>
<li>kabutops</li>
<li>kadabra</li>
<li>kakuna</li>
<li>kangaskhan</li>
<li>karrablast</li>
<li>kecleon</li>
<li>keldeo</li>
<li>kingdra</li>
<li>kingler</li>
<li>kirlia</li>
<li>klang</li>
<li>klefki</li>
<li>klink</li>
<li>klinklang</li>
<li>koffing</li>
<li>krabby</li>
<li>kricketot</li>
<li>kricketune</li>
<li>krokorok</li>
<li>krookodile</li>
<li>kyogre</li>
<li>kyurem</li>
<li>lairon</li>
<li>lampent</li>
<li>landorus</li>
<li>lanturn</li>
<li>lapras</li>
<li>larvesta</li>
<li>larvitar</li>
<li>latias</li>
<li>latios</li>
<li>leafeon</li>
<li>leavanny</li>
<li>ledian</li>
<li>ledyba</li>
<li>lickilicky</li>
<li>lickitung</li>
<li>liepard</li>
<li>lileep</li>
<li>lilligant</li>
<li>lillipup</li>
<li>linoone</li>
<li>litleo</li>
<li>litwick</li>
<li>lombre</li>
<li>lopunny</li>
<li>lotad</li>
<li>loudred</li>
<li>lucario</li>
<li>ludicolo</li>
<li>lugia</li>
<li>lumineon</li>
<li>lunatone</li>
<li>luvdisc</li>
<li>luxio</li>
<li>luxray</li>
<li>machamp</li>
<li>machoke</li>
<li>machop</li>
<li>magby</li>
<li>magcargo</li>
<li>magikarp</li>
<li>magmar</li>
<li>magmortar</li>
<li>magnemite</li>
<li>magneton</li>
<li>magnezone</li>
<li>makuhita</li>
<li>malamar</li>
<li>mamoswine</li>
<li>manaphy</li>
<li>mandibuzz</li>
<li>manectric</li>
<li>mankey</li>
<li>mantine</li>
<li>mantyke</li>
<li>maractus</li>
<li>mareep</li>
<li>marill</li>
<li>marowak</li>
<li>marshtomp</li>
<li>masquerain</li>
<li>mawile</li>
<li>medicham</li>
<li>meditite</li>
<li>meganium</li>
<li>meloetta</li>
<li>meowstic</li>
<li>meowth</li>
<li>mesprit</li>
<li>metagross</li>
<li>metang</li>
<li>metapod</li>
<li>mew</li>
<li>mewtwo</li>
<li>mienfoo</li>
<li>mienshao</li>
<li>mightyena</li>
<li>milotic</li>
<li>miltank</li>
<li>mime jr.</li>
<li>minccino</li>
<li>minun</li>
<li>misdreavus</li>
<li>mismagius</li>
<li>moltres</li>
<li>monferno</li>
<li>mothim</li>
<li>mr. mime</li>
<li>mudkip</li>
<li>muk</li>
<li>munchlax</li>
<li>munna</li>
<li>murkrow</li>
<li>musharna</li>
<li>natu</li>
<li>nidoking</li>
<li>nidoqueen</li>
<li>nidoran</li>
<li>nidoran♂</li>
<li>nidorina</li>
<li>nidorino</li>
<li>nincada</li>
<li>ninetales</li>
<li>ninjask</li>
<li>noctowl</li>
<li>noibat</li>
<li>noivern</li>
<li>nosepass</li>
<li>numel</li>
<li>nuzleaf</li>
<li>octillery</li>
<li>oddish</li>
<li>omanyte</li>
<li>omastar</li>
<li>onix</li>
<li>oshawott</li>
<li>pachirisu</li>
<li>palkia</li>
<li>palpitoad</li>
<li>pancham</li>
<li>pangoro</li>
<li>panpour</li>
<li>pansage</li>
<li>pansear</li>
<li>paras</li>
<li>parasect</li>
<li>patrat</li>
<li>pawniard</li>
<li>pelipper</li>
<li>persian</li>
<li>petilil</li>
<li>phanpy</li>
<li>phantump</li>
<li>phione</li>
<li>pichu</li>
<li>pidgeot</li>
<li>pidgeotto</li>
<li>pidgey</li>
<li>pidove</li>
<li>pignite</li>
<li>pikachu</li>
<li>piloswine</li>
<li>pineco</li>
<li>pinsir</li>
<li>piplup</li>
<li>plusle</li>
<li>politoed</li>
<li>poliwag</li>
<li>poliwhirl</li>
<li>poliwrath</li>
<li>ponyta</li>
<li>poochyena</li>
<li>porygon</li>
<li>porygon2</li>
<li>porygon-z</li>
<li>primeape</li>
<li>prinplup</li>
<li>probopass</li>
<li>psyduck</li>
<li>pumpkaboo</li>
<li>pupitar</li>
<li>purrloin</li>
<li>purugly</li>
<li>pyroar</li>
<li>quagsire</li>
<li>quilava</li>
<li>quilladin</li>
<li>qwilfish</li>
<li>raichu</li>
<li>raikou</li>
<li>ralts</li>
<li>rampardos</li>
<li>rapidash</li>
<li>raticate</li>
<li>rattata</li>
<li>rayquaza</li>
<li>regice</li>
<li>regigigas</li>
<li>regirock</li>
<li>registeel</li>
<li>relicanth</li>
<li>remoraid</li>
<li>reshiram</li>
<li>reuniclus</li>
<li>rhydon</li>
<li>rhyhorn</li>
<li>rhyperior</li>
<li>riolu</li>
<li>roggenrola</li>
<li>roselia</li>
<li>roserade</li>
<li>rotom</li>
<li>rufflet</li>
<li>sableye</li>
<li>salamence</li>
<li>samurott</li>
<li>sandile</li>
<li>sandshrew</li>
<li>sandslash</li>
<li>sawk</li>
<li>sawsbuck</li>
<li>scatterbug</li>
<li>sceptile</li>
<li>scizor</li>
<li>scolipede</li>
<li>scrafty</li>
<li>scraggy</li>
<li>scyther</li>
<li>seadra</li>
<li>seaking</li>
<li>sealeo</li>
<li>seedot</li>
<li>seel</li>
<li>seismitoad</li>
<li>sentret</li>
<li>serperior</li>
<li>servine</li>
<li>seviper</li>
<li>sewaddle</li>
<li>sharpedo</li>
<li>shaymin</li>
<li>shedinja</li>
<li>shelgon</li>
<li>shellder</li>
<li>shellos</li>
<li>shelmet</li>
<li>shieldon</li>
<li>shiftry</li>
<li>shinx</li>
<li>shroomish</li>
<li>shuckle</li>
<li>shuppet</li>
<li>sigilyph</li>
<li>silcoon</li>
<li>simipour</li>
<li>simisage</li>
<li>simisear</li>
<li>skarmory</li>
<li>skiddo</li>
<li>skiploom</li>
<li>skitty</li>
<li>skorupi</li>
<li>skrelp</li>
<li>skuntank</li>
<li>slaking</li>
<li>slakoth</li>
<li>sliggoo</li>
<li>slowbro</li>
<li>slowking</li>
<li>slowpoke</li>
<li>slugma</li>
<li>slurpuff</li>
<li>smeargle</li>
<li>smoochum</li>
<li>sneasel</li>
<li>snivy</li>
<li>snorlax</li>
<li>snorunt</li>
<li>snover</li>
<li>snubbull</li>
<li>solosis</li>
<li>solrock</li>
<li>spearow</li>
<li>spewpa</li>
<li>spheal</li>
<li>spinarak</li>
<li>spinda</li>
<li>spiritomb</li>
<li>spoink</li>
<li>spritzee</li>
<li>squirtle</li>
<li>stantler</li>
<li>staraptor</li>
<li>staravia</li>
<li>starly</li>
<li>starmie</li>
<li>staryu</li>
<li>steelix</li>
<li>stoutland</li>
<li>stunfisk</li>
<li>stunky</li>
<li>sudowoodo</li>
<li>suicune</li>
<li>sunflora</li>
<li>sunkern</li>
<li>surskit</li>
<li>swablu</li>
<li>swadloon</li>
<li>swalot</li>
<li>swampert</li>
<li>swanna</li>
<li>swellow</li>
<li>swinub</li>
<li>swirlix</li>
<li>swoobat</li>
<li>sylveon</li>
<li>taillow</li>
<li>talonflame</li>
<li>tangela</li>
<li>tangrowth</li>
<li>tauros</li>
<li>teddiursa</li>
<li>tentacool</li>
<li>tentacruel</li>
<li>tepig</li>
<li>terrakion</li>
<li>throh</li>
<li>thundurus</li>
<li>timburr</li>
<li>tirtouga</li>
<li>togekiss</li>
<li>togepi</li>
<li>togetic</li>
<li>torchic</li>
<li>torkoal</li>
<li>tornadus</li>
<li>torterra</li>
<li>totodile</li>
<li>toxicroak</li>
<li>tranquill</li>
<li>trapinch</li>
<li>treecko</li>
<li>trevenant</li>
<li>tropius</li>
<li>trubbish</li>
<li>turtwig</li>
<li>tympole</li>
<li>tynamo</li>
<li>typhlosion</li>
<li>tyranitar</li>
<li>tyrantrum</li>
<li>tyrogue</li>
<li>tyrunt</li>
<li>umbreon</li>
<li>unfezant</li>
<li>unown</li>
<li>ursaring</li>
<li>uxie</li>
<li>vanillish</li>
<li>vanillite</li>
<li>vanilluxe</li>
<li>vaporeon</li>
<li>venipede</li>
<li>venomoth</li>
<li>venonat</li>
<li>venusaur</li>
<li>vespiquen</li>
<li>vibrava</li>
<li>victini</li>
<li>victreebel</li>
<li>vigoroth</li>
<li>vileplume</li>
<li>virizion</li>
<li>vivillon</li>
<li>volbeat</li>
<li>volcanion</li>
<li>volcarona</li>
<li>voltorb</li>
<li>vullaby</li>
<li>vulpix</li>
<li>wailmer</li>
<li>wailord</li>
<li>walrein</li>
<li>wartortle</li>
<li>watchog</li>
<li>weavile</li>
<li>weedle</li>
<li>weepinbell</li>
<li>weezing</li>
<li>whimsicott</li>
<li>whirlipede</li>
<li>whiscash</li>
<li>whismur</li>
<li>wigglytuff</li>
<li>wingull</li>
<li>wobbuffet</li>
<li>woobat</li>
<li>wooper</li>
<li>wormadam</li>
<li>wurmple</li>
<li>wynaut</li>
<li>xatu</li>
<li>xerneas</li>
<li>yamask</li>
<li>yanma</li>
<li>yanmega</li>
<li>yveltal</li>
<li>zangoose</li>
<li>zapdos</li>
<li>zebstrika</li>
<li>zekrom</li>
<li>zigzagoon</li>
<li>zoroark</li>
<li>zorua</li>
<li>zubat</li>
<li>zweilous</li>
<li>zygarde</li>
</ul>
</div>
</div>
</main>
<script>
const $ = document.querySelector.bind(document)
let count = 0
$('#theIncrement').addEventListener('click', () => {
count++
})
$('#theCountReveal').addEventListener('click', () => {
$('#theCount').textContent = count
})
$('#theDomStateSetter').addEventListener('click', () => {
$('#theRando').textContent = Math.random()
$('#theInput').value = 'Random text: ' + btoa(Math.random().toString())
$('#theCheckbox').checked = Math.random() < 0.5
$('#theSubScroller').scrollTop = Math.random() * $('#theSubScroller').scrollHeight
})
</script>
</body>
</html>
Raw
other.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Test BF Cache - Other Page</title>
<style>
main {
max-width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<main>
<h1>Test BF Cache - Other Page</h1>
<p>Press the Back button.</p>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment