@kansnpms/storage-pipe
Version:
Browser storage and cookies monitoring - Real-time tracking of localStorage, sessionStorage, cookies, and IndexedDB
322 lines (287 loc) • 9.77 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Storage Monitor Test Page</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
button {
background: #007acc;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #005a9e;
}
.status {
padding: 10px;
border-radius: 4px;
margin: 10px 0;
}
.status.success {
background: #d4edda;
color: #155724;
}
.status.error {
background: #f8d7da;
color: #721c24;
}
.log {
background: #f8f9fa;
padding: 10px;
border-radius: 4px;
font-family: monospace;
font-size: 0.9em;
max-height: 200px;
overflow-y: auto;
margin: 10px 0;
}
input,
select {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>🍪 Storage Monitor Test Page</h1>
<p>
This page helps test the Console Log Pipe Storage Monitor functionality.
</p>
<div id="status" class="status">Not connected to Storage Monitor</div>
<h3>1. Initialize Storage Monitor</h3>
<button onclick="initStorageMonitor()">Connect to Storage Monitor</button>
<button onclick="stopStorageMonitor()">Disconnect</button>
<h3>2. Cookie Operations</h3>
<input
type="text"
id="cookieName"
placeholder="Cookie name"
value="test_cookie"
/>
<input
type="text"
id="cookieValue"
placeholder="Cookie value"
value="test_value"
/>
<button onclick="setCookie()">Set Cookie</button>
<button onclick="deleteCookie()">Delete Cookie</button>
<button onclick="clearAllCookies()">Clear All Cookies</button>
<h3>3. localStorage Operations</h3>
<input
type="text"
id="localKey"
placeholder="localStorage key"
value="test_key"
/>
<input
type="text"
id="localValue"
placeholder="localStorage value"
value="test_value"
/>
<button onclick="setLocalStorage()">Set localStorage</button>
<button onclick="removeLocalStorage()">Remove localStorage</button>
<button onclick="clearLocalStorage()">Clear localStorage</button>
<h3>4. sessionStorage Operations</h3>
<input
type="text"
id="sessionKey"
placeholder="sessionStorage key"
value="session_key"
/>
<input
type="text"
id="sessionValue"
placeholder="sessionStorage value"
value="session_value"
/>
<button onclick="setSessionStorage()">Set sessionStorage</button>
<button onclick="removeSessionStorage()">Remove sessionStorage</button>
<button onclick="clearSessionStorage()">Clear sessionStorage</button>
<h3>5. Bulk Operations</h3>
<button onclick="createTestData()">Create Test Data</button>
<button onclick="modifyTestData()">Modify Test Data</button>
<button onclick="clearAllStorage()">Clear All Storage</button>
<h3>Activity Log</h3>
<div id="log" class="log"></div>
<button onclick="clearLog()">Clear Log</button>
</div>
<!-- Include the storage monitor library -->
<script src="../../dist/storage-monitor.umd.js"></script>
<script>
let storageMonitor = null;
function log(message) {
const logDiv = document.getElementById('log');
const timestamp = new Date().toLocaleTimeString();
logDiv.innerHTML += `[${timestamp}] ${message}\n`;
logDiv.scrollTop = logDiv.scrollHeight;
console.log(message);
}
function updateStatus(message, isSuccess = true) {
const statusDiv = document.getElementById('status');
statusDiv.textContent = message;
statusDiv.className = `status ${isSuccess ? 'success' : 'error'}`;
}
async function initStorageMonitor() {
try {
log('🍪 Initializing Storage Monitor...');
storageMonitor = new StorageMonitor({
serverPort: 3006,
serverHost: 'localhost',
enableCookies: true,
enableLocalStorage: true,
enableSessionStorage: true,
enableIndexedDB: true,
pollInterval: 1000,
});
await storageMonitor.init();
updateStatus('✅ Connected to Storage Monitor', true);
log('✅ Storage Monitor connected successfully');
} catch (error) {
updateStatus(`❌ Connection failed: ${error.message}`, false);
log(`❌ Failed to connect: ${error.message}`);
}
}
function stopStorageMonitor() {
if (storageMonitor) {
storageMonitor.stop();
storageMonitor = null;
updateStatus('🔌 Disconnected from Storage Monitor', false);
log('🔌 Storage Monitor disconnected');
}
}
// Cookie operations
function setCookie() {
const name = document.getElementById('cookieName').value;
const value = document.getElementById('cookieValue').value;
document.cookie = `${name}=${value}; path=/`;
log(`🍪 Set cookie: ${name} = ${value}`);
}
function deleteCookie() {
const name = document.getElementById('cookieName').value;
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
log(`🍪 Deleted cookie: ${name}`);
}
function clearAllCookies() {
document.cookie.split(';').forEach(cookie => {
const eqPos = cookie.indexOf('=');
const name =
eqPos > -1 ? cookie.substr(0, eqPos).trim() : cookie.trim();
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
});
log('🍪 Cleared all cookies');
}
// localStorage operations
function setLocalStorage() {
const key = document.getElementById('localKey').value;
const value = document.getElementById('localValue').value;
localStorage.setItem(key, value);
log(`💾 Set localStorage: ${key} = ${value}`);
}
function removeLocalStorage() {
const key = document.getElementById('localKey').value;
localStorage.removeItem(key);
log(`💾 Removed localStorage: ${key}`);
}
function clearLocalStorage() {
localStorage.clear();
log('💾 Cleared localStorage');
}
// sessionStorage operations
function setSessionStorage() {
const key = document.getElementById('sessionKey').value;
const value = document.getElementById('sessionValue').value;
sessionStorage.setItem(key, value);
log(`🔄 Set sessionStorage: ${key} = ${value}`);
}
function removeSessionStorage() {
const key = document.getElementById('sessionKey').value;
sessionStorage.removeItem(key);
log(`🔄 Removed sessionStorage: ${key}`);
}
function clearSessionStorage() {
sessionStorage.clear();
log('🔄 Cleared sessionStorage');
}
// Bulk operations
function createTestData() {
// Create test cookies
document.cookie = 'user_id=12345; path=/';
document.cookie = 'session_token=abc123xyz; path=/';
document.cookie = 'theme=dark; path=/';
// Create test localStorage
localStorage.setItem(
'settings',
JSON.stringify({ theme: 'dark', lang: 'en' })
);
localStorage.setItem(
'user_preferences',
JSON.stringify({ notifications: true })
);
localStorage.setItem('cache_timestamp', Date.now().toString());
// Create test sessionStorage
sessionStorage.setItem(
'temp_data',
JSON.stringify({ session: 'active' })
);
sessionStorage.setItem(
'form_data',
JSON.stringify({ step: 1, completed: false })
);
log('📦 Created test data across all storage types');
}
function modifyTestData() {
// Modify existing data
document.cookie = 'theme=light; path=/';
localStorage.setItem(
'settings',
JSON.stringify({ theme: 'light', lang: 'es' })
);
sessionStorage.setItem(
'form_data',
JSON.stringify({ step: 2, completed: true })
);
log('✏️ Modified test data');
}
function clearAllStorage() {
clearAllCookies();
clearLocalStorage();
clearSessionStorage();
log('🧹 Cleared all storage types');
}
function clearLog() {
document.getElementById('log').innerHTML = '';
}
// Auto-initialize on page load
window.addEventListener('load', () => {
log('📄 Test page loaded');
log('💡 Start by clicking "Connect to Storage Monitor"');
log('💡 Make sure the CLI is running: clp storage --port 3006');
});
</script>
</body>
</html>