Skip to content

Instantly share code, notes, and snippets.

@nexpr

nexpr/storage-view.html

Last active November 26, 2023 11:25
Show Gist options
  • Save nexpr/1a033c8080038c562ed19187d4198f22 to your computer and use it in GitHub Desktop.
Save nexpr/1a033c8080038c562ed19187d4198f22 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
storage-view.html
<!DOCTYPE html>
<meta charset="utf-8" />
<script type="module">
import { html, render } from "https://cdn.jsdelivr.net/npm/[email protected]/node.js"
const page = async () => {
const valueFormat = (value) => {
try {
const val = JSON.parse(value)
return JSON.stringify(val, null, " ")
} catch {
return value
}
}
const [ls, ss] = [localStorage, sessionStorage]
.map(storage =>
Object.keys(storage)
.sort()
.map(key => ({ key, value: valueFormat(storage[key]) }))
)
const co = await cookieStore.getAll()
const co_cols = co[0] ? Object.keys(co[0]) : []
return html`
<h1>LocalStorage</h1>
<div class="wrapper">${table(ls, ["key", "value"])}</div>
<h1>SessionStorage</h1>
<div class="wrapper">${table(ss, ["key", "value"])}</div>
<h1>Cookies</h1>
<div class="wrapper">${table(co, co_cols)}</div>
`
}
const table = (rows, columns) => {
if (rows.length === 0) {
return html`
<p>No data</p>
`
}
return html`
<table>
<thead>
<tr>
${columns.map(col => {
return html`
<th>${col}</th>
`
})}
</tr>
</thead>
<tbody>
${rows.map(row => {
return html`
<tr>
${columns.map(col => {
return html`
<td>${row[col]}</td>
`
})}
</tr>
`
})}
</tbody>
</table>
`
}
render(document.getElementById("root"), await page())
</script>
<style>
#root {
margin: 10px;
}
h1 {
font-size: 24px;
margin: 30px 0 5px;
}
p {
margin: 0 20px;
padding: 10px;
text-align: center;
border: 1px solid silver;
font-size: 18px;
}
.wrapper {
max-height: 60vh;
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
border: 2px solid silver;
:is(th) {
font-weight: bold;
text-align: center;
}
:is(td, th) {
border: 1px solid silver;
padding: 4px 8px;
white-space: pre;
font-family: meiryoke_console, monaco, consolas, monospace;
}
}
</style>
<div id="root"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment