브라우저 저장소

<div class="v store"><header>BROWSER STORAGE <span id="store-name">Cookie</span></header><div class="stage store-stage"><div class="store-data">DATA <span id="store-data">session id</span></div><div class="store-arrow">→</div><div class="store-map"><div id="store0"><b>Cookie</b><small>request</small></div><div id="store1"><b>Local storage</b><small>sync</small></div><div id="store2"><b>IndexedDB</b><small>async</small></div></div></div><div class="muted">select a store to compare its path</div></div>

.v{width:min(94vw,760px);height:min(88vh,320px);padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 clamp(12px,2.4vmin,16px)/1.3 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden}.v header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--accent);font-weight:700}.v header span{color:var(--muted);font-weight:500}.v .stage{flex:1;min-height:0;position:relative}.v .muted{color:var(--muted)}.v .active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent)!important;color:var(--fg)}.v button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer}.store-stage{display:flex;align-items:center;justify-content:center;gap:6px}.store-data{border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-radius:7px;padding:7px;text-align:center;width:23%;font-weight:700}.store-data span{display:block;color:var(--muted);font-size:clamp(12px,2.2vmin,13px);font-weight:500}.store-arrow{color:var(--accent);font-size:22px}.store-map{display:flex;flex-direction:column;gap:4px;width:58%}.store-map div{border:1px solid var(--line);border-radius:6px;background:var(--bg);padding:3px 5px;display:flex;justify-content:space-between;gap:4px;align-items:center;font-size:clamp(12px,2.3vmin,13px)}.store-map div.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.store-map small{color:var(--muted);font-size:clamp(12px,2vmin,12px)}

let i=0;const names=["Cookie","Local storage","IndexedDB"],examples=["session id","theme value","offline records"];function show(){for(let j=0;j<3;j++)document.getElementById("store"+j).classList.toggle("on",j===i);document.getElementById("store-name").textContent=names[i];document.getElementById("store-data").textContent=examples[i];i=(i+1)%3}show();let timer=setInterval(show,850);document.querySelectorAll(".store-map div").forEach((el,j)=>el.addEventListener("pointerdown",()=>{clearInterval(timer);i=j;show()}))