{"id":1439,"date":"2024-10-07T20:42:46","date_gmt":"2024-10-07T23:42:46","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1439"},"modified":"2024-10-07T20:43:32","modified_gmt":"2024-10-07T23:43:32","slug":"resumo-da-live-tiktok-07-10-2024","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1439","title":{"rendered":"Resumo da Live TikTok 07\/10\/2024"},"content":{"rendered":"\n

Ol\u00e1 Pessoal! <\/p>\n\n\n\n

Na Live do dia 07\/10\/2024 Trabalhamos com o LocalStorage para armazenamento de dados.<\/p>\n\n\n\n

LocalStorage<\/h2>\n\n\n\n

O LocalStorage \u00e9 uma ferramenta poderosa no JavaScript que permite armazenar dados no navegador de forma persistente. Isso significa que os dados mant\u00eam-se dispon\u00edveis mesmo depois que o usu\u00e1rio fecha e reabre o navegador. Ao contr\u00e1rio dos cookies, o LocalStorage pode armazenar uma quantidade maior de dados (geralmente at\u00e9 5MB por dom\u00ednio).<\/p>\n\n\n\n

Dicas de uso<\/h3>\n\n\n\n

Embora o LocalStorage seja uma ferramenta muito \u00fatil, \u00e9 importante utiliz\u00e1-lo com cautela. Ele deve armazenar apenas dados que n\u00e3o s\u00e3o sens\u00edveis, pois as informa\u00e7\u00f5es armazenadas podem ser acessadas e modificadas pelo usu\u00e1rio ou por scripts maliciosos. Para dados sens\u00edveis, \u00e9 recomend\u00e1vel utilizar outras t\u00e9cnicas, como o uso de cookies seguros ou armazenamento no servidor.<\/p>\n\n\n\n

Al\u00e9m disso, tenha cuidado com o volume de dados armazenados. Apesar de oferecer um espa\u00e7o razo\u00e1vel, abusar desse recurso pode impactar o desempenho da aplica\u00e7\u00e3o.<\/p>\n\n\n\n

<\/p>\n\n\n\n

HTML\n\n\n\n<!DOCTYPE html>\n<html lang=\"pt-br\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>LocalStorage<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <h1> Exerc\u00edcios com LocalStorage<\/h1>\n    <button onclick=\"armazenarNome('Jo\u00e3o')\"> Armazenar Nome<\/button>\n    <button onclick=\"recuperarNome()\"> Recuperar Nome<\/button>\n    <button onclick=\"removerNome()\"> Remover Nome<\/button>\n\n    <button onclick=\"armazenarUsuario(\n        { nome: 'Marcia', idade: 30}\n    )\"> Armazenar Usu\u00e1rio<\/button>\n    \n    <button onclick=\"recuperarUsuario()\"> Recuperar Usu\u00e1rio<\/button>\n    <button onclick=\"listarItens()\"> Listar Itens<\/button>\n    <button onclick=\"limparLocalStorage()\"> Limpar LocalStorage<\/button>\n\n\n\n    <script>\n        function armazenarNome(valor){\n            localStorage.setItem('nome', valor)\n        }\n\n        function recuperarNome(){\n            const chave = localStorage.key(0);\n            const nome = localStorage.getItem('nome');\n            alert(` ${chave}: ${nome}`);\n        }\n\n        function removerNome(){\n            localStorage.removeItem('nome');\n        }\n\n        function armazenarUsuario(usuario){\n            localStorage.setItem('usuario', JSON.stringify(usuario));\n\n        }\n\n        function recuperarUsuario(){\n                const usuario = localStorage.getItem('usuario');\n                alert(usuario);\n            }\n        \n        function listarItens(){\n            for(let i = 0; i < localStorage.length; i++ ){\n                const chave = localStorage.key(i);\n                const valor = localStorage.getItem(chave);\n                alert(` ${chave}: ${valor}` );\n            }\n        }\n\n        function limparLocalStorage(){\n\n            localStorage.clear();\n        }\n\n    <\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n\nCSS\n\nbody{\n    font-family: Arial, Helvetica, sans-serif;\n    background-color: #1a1a1a;\n    color: #f0f0f0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100vh;\n    margin: 0;\n    text-align: center;\n}\nh1{\n    margin-bottom: 20px;\n    font-size: 3rem;\n    color: #ff4757;\n    text-shadow: 2px 2px #000;\n    font-family: 'Impact', sans-serif;\n}\n\nbutton{\n    background-color: #ff4757;\n    color: white;\n    border: none;\n    border-radius: 5px;\n    padding: 15px 30px;\n    margin: 10px;\n    font-size: 1.2rem;\n    cursor: pointer;\n    transition: background-color 0.3s, transform 0.2s;\n    font-family: 'Impact', sans-serif;\n    box-shadow: 0 4px 10 px rgba(0,0,0, 0.5);\n}\n\nbutton:hover{\n    background-color: #e84118;\n    transform:  translateY(-2px);\n\n}\nbutton:active{\n    transform: translateY(0);    \n}\n\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
https:\/\/go.hotmart.com\/V89811082M?dp=1<\/a><\/p>\n\n\n\n
https:\/\/go.hotmart.com\/X90111663X?dp=1<\/a><\/p>\n\n\n\n
\n\n\n\n
HOR\u00c1RIO DAS LIVES<\/strong><\/p>\n\n\n\n
Domingo e Segunda \u00e0s 19:00hs<\/p>\n\n\n\n
Quarta \u00e0s 18:00hs<\/p>\n\n\n\n
Quinta e Sexta \u00e0s 10:00hs<\/p>\n\n\n\n
 S\u00e1bado \u00e0s 20:00hs<\/p>\n\n\n\n
\n