• Home
MAIS

    Utilizando localStorage ou armazenamento local

    - Anúncio -

    O que é Armazenamento Local?

    - Anúncio -

    Com o armazenamento local, os aplicativos da Web podem armazenar dados localmente no navegador do usuário.

    Antes do HTML5, os dados do aplicativo precisavam ser armazenados em cookies, incluídos em cada solicitação de servidor. O armazenamento local é mais seguro e grandes quantidades de dados podem ser armazenados localmente, sem afetar o desempenho do site.

    Ao contrário dos cookies, o limite de armazenamento é muito maior (pelo menos 5 MB) e as informações nunca são transferidas para o servidor.

    O armazenamento local é por origem (por domínio e protocolo). Todas as páginas, a partir de uma origem, podem armazenar e acessar os mesmos dados.

    Suporte do navegador

    Os números na tabela especificam a primeira versão do browser que suporta totalmente o Armazenamento Local.

    Suporte navegador a localStorageObjetos de armazenamento local

    O armazenamento local fornece dois objetos para armazenar dados no cliente:

    Window.localStorage – armazena dados sem data de expiração
    Window.sessionStorage – armazena dados para uma sessão (os dados são perdidos quando a guia do navegador é fechada)

    Antes de usar o armazenamento local, verifique o suporte do navegador para localStorage e sessionStorage:

    if (typeof(Storage) !== "undefined") {
     // Código para localStorage/sessionStorage.
     } else {
     // Sem suporte a local storage
     }

    O objeto localStorage

    O objeto localStorage armazena os dados sem data de validade. Os dados não serão apagados quando o navegador estiver fechado e estarão disponíveis no dia, semana ou ano seguinte.
    Exemplo

     // Inserir dados
     localStorage.setItem("sobrenome", "Silva");
     // Receber dados
     document.getElementById("result").innerHTML = localStorage.getItem("sobrenome");

    A sintaxe para remover o item “lastname” localStorage é da seguinte maneira:
    localStorage.removeItem(“lastname”);

    O objeto sessionStorage

    O objecto sessionStorage é igual ao objeto localStorage, excepto que ele armazena os dados para apenas uma sessão. Os dados são excluídos quando o usuário fecha a guia do navegador específico.

    O exemplo a seguir conta o número de vezes que um usuário clicou em um botão, na sessão atual:
    Exemplo

    if (sessionStorage.clickcount) {
     sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
     } else {
     sessionStorage.clickcount = 1;
     }
     document.getElementById("result").innerHTML = "Você clicou no botão " +
     sessionStorage.clickcount + " vezes nessa seção.";

    Compatibilidade

    Agora, se você deseja implementar esse tipo de funcionalidade hoje, fique atento aos navegadores. Usando o Modernizr você consegue detectar o suporte dos browsers para essa API.

    if (Modernizr.localstorage) {
     // esse navegador suporta HTML5 Storage :D
     } else {
     // esse navegador NÃO suporta HTML5 Storage :(
     }
    - Anúncio -

    Artigos recentes

    Cielo ZIP

    Cabe no seu bolso e não precisa de celular. Você pode levar para aonde quiser e conta com bateria de longa duração.DébitoCrédito à vistaCrédito...

    Cielo Mini ZIP – Agilidade e facilidade para você vender aonde estiver

    A maquininha de cartão que não precisa de celular, é pequena no tamanho e no preço. Agilidade e facilidade para você vender aonde estiver.DébitoCrédito...

    Moderninha Smart

    Vantagens de vender com a Moderninha Smart Sem aluguel, nem taxa de adesão Faça a gestão completa do...

    Plugin API Cielo 3.0 para Woocommerce

    Integração do Woocommerce com a nova API 3.0 da Cielo. 

    Aproveite a Black Friday da Moderninha e Minizinha

    Aproveite a Black Friday para adquirir sua moderninha ou minizinha com um descontão. Maquininhas com até 50% de desconto. Veja abaixo a relação dos descontos: Minizinha Chip...

    Continue lendo

    DEIXE UMA RESPOSTA

    Please enter your comment!
    Please enter your name here

    Stay on op - Ge the daily news in your inbox