// 1. Gravar um item (Chave, Valor)
localStorage.setItem('preferenciaTema', 'dark');
 
// 2. Recuperar um item (Retorna string ou null se não existir)
const temaAtual = localStorage.getItem('preferenciaTema');
console.log(temaAtual); // ___WZW_STR_0___
 
// 3. Remover uma chave específica
localStorage.removeItem('preferenciaTema');
 
// 4. Limpar todos os registros do domínio de uma vez
localStorage.clear();
 
// 5. Saber quantos itens estão armazenados
console.log(localStorage.length);

const configuracoesUsuario = {
    nome: 'Carlos Eduardo',
    notificacoes: true,
    idioma: 'pt-BR',
    itensPorPagina: 25
};
 
// ❌ FORMA ERRADA:
// localStorage.setItem('config', configuracoesUsuario); // grava "[object Object]"
 
// ✅ FORMA CORRETA (Serializando para texto JSON):
localStorage.setItem('config', JSON.stringify(configuracoesUsuario));
 
// Recuperando e convertendo de volta para objeto real:
const salvo = localStorage.getItem('config');
if (salvo) {
    const objetoRestaurado = JSON.parse(salvo);
    console.log(objetoRestaurado.nome); // ___WZW_STR_0___
}

<div class="wzw-theme-box">
    <h3>🎨 Personalização de Tema da Página</h3>
    <p>Alterne o modo de exibição. Sua escolha continuará ativa mesmo se fechar o navegador:</p>
    <button id="btnAlternarTema" class="btn-theme">🌙 Ativar Modo Escuro</button>
</div>

/* Cores padrão (Modo Claro) */
body {
    background-color: #ffffff;
    color: #1e293b;
    transition: background-color 0.3s, color 0.3s;
}
 
/* Cores quando a classe dark-theme estiver no body */
body.dark-theme {
    background-color: #0f172a;
    color: #f8fafc;
}
 
.wzw-theme-box {
    padding: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    max-width: 480px;
}
 
body.dark-theme .wzw-theme-box {
    border-color: #334155;
    background-color: #1e293b;
}
 
.btn-theme {
    padding: 10px 18px;
    background-color: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

const botaoTema = document.getElementById('btnAlternarTema');
 
// 1. Ao carregar a página, verifica se já existe tema salvo
function aplicarTemaInicial() {
    const temaSalvo = localStorage.getItem('wzw_tema');
    if (temaSalvo === 'dark') {
        document.body.classList.add('dark-theme');
        botaoTema.textContent = '☀️ Ativar Modo Claro';
    } else {
        document.body.classList.remove('dark-theme');
        botaoTema.textContent = '🌙 Ativar Modo Escuro';
    }
}
 
// 2. Alterna o tema e grava a nova preferência
botaoTema.addEventListener('click', () => {
    const modoEscuroAtivo = document.body.classList.toggle('dark-theme');
    
    if (modoEscuroAtivo) {
        localStorage.setItem('wzw_tema', 'dark');
        botaoTema.textContent = '☀️ Ativar Modo Claro';
    } else {
        localStorage.setItem('wzw_tema', 'light');
        botaoTema.textContent = '🌙 Ativar Modo Escuro';
    }
});
 
// Executa na inicialização
aplicarTemaInicial();

window.addEventListener('storage', (event) => {
    console.log(`Chave alterada em outra aba: ${event.key}`);
    console.log(`Valor anterior: ${event.oldValue}`);
    console.log(`Novo valor: ${event.newValue}`);
    
    // Se o usuário mudou o tema na aba 2, atualiza a aba 1 automaticamente!
    if (event.key === 'wzw_tema') {
        aplicarTemaInicial();
    }
});