nexpr/storage-view.html

## storage-view.html
<!DOCTYPE html>

<meta charset="utf-8" />

<script type="module">
	import { html, render } from "https://cdn.jsdelivr.net/npm/uhtml@4.1.20/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>
	<!DOCTYPE html>

	<meta charset="utf-8" />

	<script type="module">
	import { html, render } from "https://cdn.jsdelivr.net/npm/uhtml@4.1.20/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>