05/02/2014

check radio buttons com jQuery

Olá.

Muitas pessoas me mandam email ou perguntam no grupo de jQuery como faz para dar um check em inputs do tipo radio. Neste post vamos ver algumas formas:

Em versões do jQuery menores que 1.9 a forma correta é: attr('checked', 'checked'); e para as outras versões devemos usar: .prop("checked", true). Como na data desse post estamos na versão 2.0.2 vou usar a função prop()

Supondo que temos o seguinte código HTML

<form>
    <div id='type'>
        <label for="radio_1">Um</label><input type='radio' id='radio_1' name='type' value='um' />
        <label for="radio_2">Dois</label><input type='radio' id='radio_2' name='type' value='dois' />
        <label for="radio_3">Três</label><input type='radio' id='radio_3' name='type' value='tres' /> 
    </div>
</form>

Selecionando radio button pelo id

A maneira mais fácil de dar um checked em algum dos radios seria pegando o elemento pelo id:

$("#radio_2").prop("checked", true)

Demo:

Selecionando radio button pelo valor

Uma coisa que pode ser muito comum é não ter um id, ou esse id ser desconhecido. Dessa forma, precisamos selecionar o elemento pelo seu valor.

$("input[value=tres]").prop("checked", true)

Onde tres é o valor do elemento que eu estou buscando.

Demo

Relembrando

Para versões abaixo de 1.9 usa-se:

$elemento.attr('checked', 'checked')

E para outras versões:

$elemento.prop("checked", true)

Até a próxima.

, ,
16/05/2013

Sorteio do livro: Segredos do Ninja JavaScript

jquery_ninja

Estamos divulgando mais uma ação em parceria com a novatec.

Trata-se de um sorteios do livro Segredos do Ninja Javascript lançado na última semana. Para quem não conhece, o livro foi escrito por John Resig, nada mais, nada menos que o criador do jQuery.

Como participar no Facebook?

O participante deverá:

As participações só serão aceitas até o dia 26/05/2013 às 23:59. O sorteio acontecerá no dia 27/05/2013. Boa sorte! :)

Resenha do livro

Nem sempre você pode bater de frente com seu software. Às vezes você tem de se aproximar dele pelos flancos ou esgueirar-se sorrateiramente por suas costas. Você deve dominar um arsenal de ferramentas e conhecer cada truque furtivo. Você deve ser um ninja.

Segredos do Ninja JavaScript guiará você pelo caminho do esclarecimento em JavaScript. Este livro único inicia com conceitos-chave, como o relacionamento entre funções, objetos e closures, ensinados a partir da perspectiva do mestre. Você evoluirá de aprendiz a ninja à medida que absorve insights inovadores sobre as técnicas que utilizará diariamente para revelar funcionalidades e capacidades das quais você nunca soube. Ao atingir os capítulos finais, você estará pronto para codificar aplicações JavaScript brilhantes e talvez até mesmo para desenvolver suas próprias bibliotecas e frameworks.

Conteúdo abordado pelo livro:

  • Funções, objetos, closures, expressões regulares e muito mais
  • Como visualizar aplicações e bibliotecas a partir da perspectiva certa
  • Exemplos de design JavaScript moderno
  • Como lidar com as complexidades do desenvolvimento para navegadores cruzados
19/04/2013

jQuery 2.0, seu lindo!

Depois de tão esperado, uma grande notícia para nós desenvolvedores. jQuery 2.0 foi lançado! :)

Como já divulgado, ele abandona o suporte para os Old-IE’s (6, 7 e 8), e com isso retira uma grande parte de código que era necessário para dar suporte a estes navegadores. Resultado? Bem menor (12%), mais rápido e o código ficou mais limpo para podermos analisar e entender como funciona cada coisa. :)

Ah, você precisa dar suporte a estes navegadores? Não tem o que se preocupar. A equipe do jQuery continua desenvolvendo em paralelo as versões 1.x (atual 1.9 e futura 1.10) para os sites que precisam suportar estes browsers.

Como encontrá-los?

Se você precisar atualizar a partir de uma versão anterior a 1.9, o ideal é usar o plugin jQuery Migrate e acessar o guia de upgrade do jQuery 1.9, pois houve uma série de mudanças. E é bem simples usar o plugin. Basta incluir no seu HTML e abrir o console para ver as mensagens que são geradas.

Se você não precisa se preocupar com os Old-IE’s, viva! Pode colocar o 2.0 para rodar e ser feliz para o resto da vida. Se você precisa suportá-los, também não tem problema. O carregamento do 1.9 pode ser feito apenas para os browsers antigos, e os novos ficam com a versão mais recente, mais enxuta e mais rápida :)

Como fazer isso? Bem simples :)

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->

<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--[endif]-->

Algumas das mudanças mais importantes:

Não há mais suporte para IE 6/7 e 8: Vale ressaltar que isso também pode afetar os usuários do IE9/10, mesmo se forem usados em “modo de exibição de compatibilidade” que emulam as versões mais antigas. Para evitar isto, sugiro que use sempre a tag X-UA-Compatible.

Tamanho reduzido: O arquivo minificado da versão 2.0.0 é 12% menor que o 1.9.1 graças a eliminação do código de compatibilidade dos Old-IE’s. O elo mais fraco agora são os velhos navegadores Android 2.x / Webkit. Como o uso do Android 2.x já é bem reduzido, em breve este suporte também deve ser removido.

“Custom builds”: Esta funcionalidade tem sido bem refinada e ampliada desde que estreou no jQuery 1.8. Agora você pode escolher uma as combinações de 12 módulos diferentes para criar uma versão personalizada menor. Com a configuração mínima, é possível utilizar parte da biblioteca com apenas 10KB, minified e compactado.

Se sua aplicação já está funcionando com o jQuery 1.9, funcionará com o 2.0 :)

21/03/2013

jQuery Validate plugin

Muitas vezes a tarefa de validar dados de formulários pode se tornar trabalhosa e demorada. O jQuery Validate, é uma ferramenta eficiente para tornar esse trabalho rápido e fácil.
Ele suporta todos os tipos de campo válidos pela W3C, incluindo os do HTML5, e é muito simples de se usar.

Veja um exemplo:

Se você tem um campo de formulário que deseja tornar obrigatório, você só precisar adicionar ao campo o atributo data-required.

<input type="text" data-required />

Para que os atributos de validação comecem a funcionar, você só precisa chamar o método jQuery.fn.validate como no exemplo abaixo.

$('form').validate();

Após fazer isso você pode usar vários callbacks passados para o método jQuery.fn.validate para executar funções conforme a validação. Veja um exemplo de como deixar os campos inválidos vermelhos e os campos válidos verdes:

$('form').validate({
	// função chamada para cada campo inválido
	eachInvalidField : function() {

		$(this).css('background', '#F00');
	},
	// função chamada para cada campo válido
	eachValidField : function() {

		$(this).css('background', '#0F0');
	}
});

Você pode ver a lista com todos os callbacks clicando aqui.

A ferramenta também tem suporte a validação por condicionais, exepressões regulares, extensões e máscaras dentre diversos outros recursos que podem ser conferidos no repositório do Github.

Você pode ajudar a melhorar a ferramenta com suas sugestões, feedbacks ou mesmo alterando o código através do Github (Fork on Github).

20/03/2013

Aprenda jQuery!

É isso mesmo, o título está correto, conheça e aprenda bem esta biblioteca que entra ano, sai ano, segue líder na preferência internacional.

Esta dica não é exclusiva para novatos na biblioteca, ela serve também para você que já sabe tudo e que até se auto-intitula um “jQuery ninja”. A propósito, o ideal é ser “samurai” pois ele sim tem características nobres como a “disciplina, lealdade e grande habilidade com a katana”.

Piadinhas à parte, a novidade é que a jQuery Foundation lançou recentemente o jQuery Learning Center, um projeto beta com a intenção de ensinar e explicar conceitos básicos e avançados da jQuery, do JavaScript e de assuntos relacionados ao desenvolvimento front-end. Ele é a evolução jQuery Docs misturado ao projeto jQuery Fundamentals.

Mas por que mais um site ensinando jQuery?

A proposta é centralizar o conhecimento e mantê-lo atualizado pois sabemos que pelo fato da comunidade ser grande, o aprendizado compartilhado em tutoriais, blogs, fóruns poderá ficar obsoleto rapidamente.

Por exemplo, um assunto que você precisa estar por dentro é sobre como trabalhar com eventos, pois antigamente usava-se o bind(), depois passou a ser utilizado o live() e então surgiu o delegate(), só que atualmente o certo é usar o on(), wtf?!

Nesta nova documentação já é possível ter acesso à informação atualizada, além do histórico de todos os recursos da jQuery.

E o diferencial do Learn jQuery é que todos podem colaborar, inclusive você, “seu ninja”, pois o projeto está no GitHub.

Portanto, apesar de haver muita biblioteca nova por aí, com propósito semelhante ou não à jQuery, e que você já deve estar de olho, eu recomendo dedicar um pouco do seu tempo para se atualizar com a biblioteca para complementar seus conhecimentos nesta biblioteca que não deve parar de evoluir tão cedo.

Referências

17/03/2013

Como publicar um plugin no novo repositório do jQuery

Depois de meses fora do ar, finalmente o novo repositório oficial de plugins jQuery está no ar!

jq

Muita coisa mudou para você que já cria plugins jQuery e esse artigo está aqui para lhe ensinar como publicar seu plugin por lá.

Passo 0 – Crie seu plugin

Isso mesmo, se você caiu de paraquedas nesse artigo e nunca criou um plugin, essa é sua chance de começar. Use o jQuery Boilerplate e seja feliz :)

Passo 1 – Crie um Package Manifest

Crie um arquivo chamado nomeDoSeuPlugin.jquery.json, ele irá listar todas as informações sobre o seu plugin.

Fique à vontade para seguir o seguinte modelo:

{
  "name": "boilerplate",
  "title": "jQuery Boilerplate",
  "description": "A jump-start for jQuery plugins development.",
  "keywords": [
    "jquery",
    "boilerplate",
    "plugins"
  ],
  "version": "3.2.0",
  "author": {
    "name": "Zeno Rocha",
    "url": "https://github.com/zenorocha"
  },
  "maintainers": [
    {
      "name": "Zeno Rocha",
      "email": "zno.rocha@gmail.com",
      "url": "https://github.com/zenorocha"
    },
    {
      "name": "Addy Osmani",
      "url": "https://github.com/addyosmani"
    }
  ],
  "licenses": [
    {
      "type": "MIT",
      "url": "http://www.opensource.org/licenses/mit-license.php"
    }
  ],
  "bugs": "https://github.com/jquery-boilerplate/boilerplate/issues",
  "homepage": "http://jqueryboilerplate.com",
  "docs": "https://github.com/jquery-boilerplate/boilerplate#readme",
  "download": "https://github.com/jquery-boilerplate/boilerplate/archive/master.zip",
  "dependencies": {
    "jquery": ">=1.4"
  }
}

Se tiver qualquer dúvida sobre os atributos dele, visite esse link.

Passo 2 – Crie um repositório público no Github

Pode parecer estranho, mas esse é um passo obrigatório hoje. Eles assumiram que é preciso incorporar uma ferramenta de versionamento de código (Git) no processo de desenvolvimento. O que, por sinal, eu acho ótimo.

Então se você ainda não criou, vai lá e crie!

Passo 3 – Adicione um Post-Receive Hook

Agora que você tem seu repositório criado no Github, será preciso fazer uma configuração bem fácil por lá.

3.1 – Abre seu repositório no Github e vá para página “Settings”

3.2 – Clique em “Service Hooks”

3.3 – Clique em “WebHook URLs”

3.4 – Entre com a URL http://plugins.jquery.com/postreceive-hook e clique em “Update Settings”

Passo 4 – Publique uma versão

Novamente outro passo muito simples se você já é familiarizado com Git.

Basta criar uma tag com a versão:

git tag 0.1.0
git push origin --tags

Se você fez todos os passos direitinho, agora você já poderá ver seu plugin por lá \o/

Sempre que for atualizar seu plugin, basta publicar uma nova tag.

Problemas?

Se encontrar algum problema pelo caminho, consulte os canais oficiais de suporte:

  • Canal IRC: #jquery-content no freenode;
  • Email: plugins@jquery.com;

Mais informações

16/03/2013

Lançados jQuery 1.9 Final e 2.0 Beta. O que muda?

Para quem já acompanha o blog do jQuery já estava por dentro que esta novidade estava mais perto do que longe. Também mencionei sobre estas novidades na palestra de Zepto.JS apresentada no FrontInMaceió e no 1st Pernambuco.JS Open Meeting.

O que há de novo no 1.9?

Algumas mudanças chamam mais atenção e podem dar problema para alguns desenvolvedores que já não estavam se preparando para isso. São elas:

  • Alguns métodos que estavam deprecateds foram removidos

    São eles: toggle(), jQuery.browser, live(), die().

    Se o desenvolvedor mantém a biblioteca sempre atualizada e toma cuidado para não usar os métodos deprecateds e corrigem onde já existia, não vai ter problemas com isso, visto que alguns destes métodos já estavam assim desde a versão 1.3)!

  • O método .css() retorna um objeto com multi-propriedades. Ex.:

    var size = $("#box").css([ "width", "height", "backgroundColor" ]);
    // { width: "10px", height: "20px", backgroundColor: "#D00DAD" }
    
  • O jQuery 1.9 agora suporta alguns seletores em todos os browsers, todos com suporte desde o IE6: :nth-last-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type, :target, :root, and :lang.

  • Novo método .finish(), que pode ser usado para completar imediatamente todas as animações que estiverem na fila em um determinado elemento.

  • Várias e várias correções de bugs

  • Algumas outras mudanças menores, como podemos encontrar na lista completa com as mudanças da versão 1.9

E o 2.0, serve para quê?

Serve para ser uma das melhores notícias para os desenvolvedores começarem 2013. O 2.0 tem o código bastante semelhante ao da versão 1.9, só que com todos os fallbacks para os old-IEs (6.0, 7.0 e 8.0) removidos, deixando-o bem mais rápido e leve.

Para auxiliar os desenvolvedores, o plugin jQuery Migrate foi criado e pode ser usado tanto com 1.9 ou 2.0 para detectar funcionalidades obsoletas e removidas, ou para restaurar características antigas para as situações difíceis em que você precisa de código antigo para executar com jQuery novo. O plugin e as mensagens que ele gera são documentados no README do projeto.

Go, go, go!

A versão final do jQuery 1.9 está disponível no jQuery’s CDN, e em breve deve estar nos CDNs da Google e da Microsoft.


http://code.jquery.com/jquery-1.9.0.js


http://code.jquery.com/jquery-migrate-1.0.0.js

Ou para testar a versão beta do jQuery 2.0, use o jQuery CDN:


http://code.jquery.com/jquery-2.0.0b1.js


http://code.jquery.com/jquery-migrate-1.0.0.js

09/03/2013

Delegando e removendo eventos com .on() e .off()

O jQuery dispões de várias formas para se delegar um evento, porém a forma mais recomendada pelo jQuery Team é o .on().

Até a versão 1.7 da biblioteca você poderia usar o método .bind() para delegar eventos para elemento no DOM e o método .live() para delegar eventos para elementos que fossem colocados na árvore DOM posteriormente à utilização do método.

Com a chegada de jQuery 1.7 veio o método .on() que pode fazer os dois tipos de delegação de forma muito eficiente.

Para isso, basta escapsular o elemento alvo, chamar o método .on() e passar como parâmetros respectivamente o tipo de evento, e a função a ser chamada.

Exemplo:

$('a').on('click', function(event) {
	event.preventDefault();
});

O exemplo acima delega um evento click para as âncoras no DOM (Equivalente a .bind()).

Mas e se eu inserir uma âncora após essa delegação?

É simples, o método .on() pode aceitar um seletor como segundo parâmetro para filtrar o primeiro seletor e a função a ser chamada é passada como terceiro parâmetro. Por tanto você pode encapsular o próprio documento, pois este sempre estará no DOM e então filtrar para o seletor que você desejar.

Exemplo:

$(document).on('click', 'a', function(event) {
	event.preventDefault();
});

O exemplo acima delega um evento click para as âncoras no DOM e também para todas as âncoras que forem inseridas dentro do document posteriormente (Equivalente ao .live()).

Você também pode declarar mais de um evento para chamar uma mesma função separando o tipo de evento por espaços.

Exemplo:

$('a').on('mouseenter focusin', function() {
	$(this).addClass('hover');
});

E pode declarar mais de um evento com funções distintas se você usar um objeto.

Exemplo:

$('a').on({
	mouseenter : function() {
		$(this).addClass('hover');
	},
	mouseleave : function() {

		$(this).removeClass('hover'); 
	}
});

Ou no caso de âncoras inseridas posteriormente no DOM:

$(document).on({
	mouseenter : function() {
		$(this).addClass('hover');
	},
	mouseleave : function() {
		$(this).removeClass('hover'); 
	},
	click : function(event) {
		event.preventDefault();
	}
}, 'a');

Também no jQuery 1.7 o método .off() foi implementado com o objetivo de remover eventos de elementos no DOM. Você pode tanto remover todos os eventos sem passar nenhum parâmetro quanto pode remover um evento em específico passando o tipo de evento como parâmetro.

Exemplo:

// Remove todos os eventos das âncoras no DOM.
$('a').off();
// Remove apenas o evento &amp;quot;submit&amp;quot; de todos os formulários no DOM.
$('form').off('submit');

Gostou ou tem algo a acrescentar? Então não esqueça de comentar ^^!

14/12/2012

Como remover um índice de um Array

Há alguns dias atrás, precisei remover um índice de um array e por um instante fiquei sem saber o que fazer, mas logo um amigo me ajudou me dando a dica que no JavaScript os arrays possuem um método chamado Splice, neste post vou explicar este método do JavaScript e como usa-lo de forma inteligente com um outro método do jQuery.

O que o método Splice faz?

O método splice, em português é algo como “emendar” ou “juntar“, ele altera os índices de um array enquanto adiciona novos índices ao array em questão.
Um exemplo bem prático seria:

var arr = [0, 1, 2, 3, 4, 5]; 
arr.splice(1, 0, 'a', 'b');
// agora o arr é: [0, "a", "b", 1, 2, 3, 4, 5]

Como usar o método Splice

A sintaxe do método é:

array.splice(de, até, item1, item2, item3, .... itemN);

Explicação dos parâmetros.

De
neste parâmetro definimos o índice que o método começara a adicionar novos itens/índices ao nosso array
Até
neste parâmetro definimos quantas ‘casas’, índices ou itens o método deverá mudar no array, atenção que este índice é relativo ao índice passado no primeiro parâmetro, é aqui que uma grande magia acontece, por que todos os índices que ficar entre os números apontados no primeiro e no segundo parâmetro serão removidos permanentemente do nosso array.
Item1, item2… itemN
Logo depois dos dois primeiros parâmetros, todos os demais parâmetros passados serão adicionados como itens do nosso array. Se só passarmos os dois primeiros parâmetros ao método, o método irá alterar nosso array assumindo que os índices apontados nos dois primeiros parâmetros devem ser substituídos por nada, logo seria o mesmo que remover algo, ou simplesmente não fazer nada dependendo do que você passou nos dois primeiros parâmetros

Então sabendo que os dois primeiros parâmetros são coringas no intuito de fazer o que diz no titulo dessa postagem, logo percebemos que só iremos precisar dos dois primeiros parâmetros, vejamos um exemplo removendo alguns itens de Arrays:

var arr = [0, 1, 2, 3, 4, 5];
// remove os índices de 1 até a quarto índice a partir de 1
arr.splice(1, 4);
// Nosso array agora é apenas [0, 5]

Se você precisa remove apenas 1 índice especifico do seu array, basta passar o segundo parâmetro com valor 1, lembre-se que o segundo parâmetro não é até o índice que você quer remover, e sim quantas ‘casas’ pra frente do índice apontado no primeiro parâmetro, vamos a mais um exemplo:

var arr = [0, 1, 2, 3, 4, 5];
// remove o índice de 3 até 1 índice pra frente
arr.splice(3, 1);
// Nosso array agora é apenas [0, 1, 2, 4, 5]

Bom, acho que já esta bom de dar exemplos deste método, eu espero que você faça bastantes testes ai no seu console =D.

Mas e o jQuery?

Ainda bem que você notou que ainda não falei de jQuery. Pois bem, imagine que precisamos remover um determinado valor de um array, mas pra dificultar não sabemos qual é o índice deste valor, ai entra o jQuery com o método $.inArray.

O $.inArray funciona assim, você passa dois parâmetros, o primeiro é o valor que você quer saber se tem ou não tem no array, e o segundo é o array que você quer fazer a verificação, se o método encontrar em algum índice que tenha o valor que você procura, ele irá retornar o número do índice que o valor foi encontrado, se ele não encontrar ira retornar -1.

Vejamos um exemplo, neste array que esta repleto de nomes de ótimos desenvolvedores:

arr = ['Brendan Eich', 'Felquis Gimenes', 'John Resig', 'Paul Irish', 'Douglas Crockford'];
console.log( $.inArray('Felquis Gimenes', arr) );
// Vai retornar 1, por que Ofelquis Gimenes esta no índice 1 deste Array

Então se você quiser remover algum item, cujo você só sabe o valor que pode estar nele, ou você se quer sabe se existe algum item com aquele valor, basta fazer assim:

arr = ['Brendan Eich', 'Felquis Gimenes', 'John Resig', 'Paul Irish', 'Douglas Crockford'];
arr.splice($.inArray('Felquis Gimenes', arr), 1);
console.log(arr);
// Agora nosso Array é apenas 'Brendan Eich', 'John Resig', 'Paul Irish', 'Douglas Crockford'

Se o valor colocado no $.inArray não for encontrado, ira ser retornado -1, e nenhum item será removido e não ocasionará em nenhum erro.

Certo? Então espero que vocês façam muitos testes ai, e que este post seja útil para alguma ocasião =D

, ,
27/06/2012

Init-Time Branching / Ramificação em tempo de inicialização

Olá novamente! Hoje vou trazer uma técnica interessante para otimização de recursos de sua aplicação javascript. A técnica conhecida como Init-Time Branching ou Ramificação em tempo de inicialização consiste em você fazer verificações (sniffing) no seu ambiente (browser por exemplo), a fim de verificar se alguns recursos são suportados.

Basicamente quando você sabe que uma certa condição da sua aplicação não vai mudar de acordo com a execução da mesma, você não precisa verificar certos atributos, recursos mais de uma vez, apenas na inicialização do processo. Ficou meio confuso, ainda?

Exemplifica aí..

Eu vou exemplificar textualmente com o exemplo clássico, utilizando os métodos addEventListener, removeEventListener, attachEvent e detachEvent. Ambos são utilizados para adicionar eventos em elementos, porém, não são encontrados em todos os browsers, logo, uma verificação precisa ser feita antes de utilizá-los. No Internet Explorer, você normalmente utilizaria o attachEvent e o detachEvent para adicionar e remover listeners respectivamente. Já na maioria dos browsers, o addEventListener e o removeEventListener são os nomes da vez.

Para uma explicação mais técnica, eu criei uma pequena lib, onde vamos aprender este conceito de otimização salvando informações locais, utilizando localStorage ou cookies!

Digamos que eu preciso de uma biblioteca no meu website/aplicação, onde vou precisar salvar informações locais no browser mesmo, pois não necessito de um SGBD externo ou ainda, realmente minha aplicação é 100% local. Bom, eu poderia simplesmente utilizar o localStorage como storage por ser muito mais simples de manipular, porém, e se meu usuário estiver rodando minha aplicação onde não há suporte para localStorage?

Aí que entra a lib. Ela fará uma contrapartida (fallbkack) para a aplicação, utilizando localStorage ou Cookies para armazenamento de dados. O melhor é que você não precisa se preocupar como os dados serão salvos, uma vez que os métodos de Salvar e Retornar serão os mesmos durante toda a aplicação.

Vamos ao código!

Viajou muito?

O código está bem comentado para o entendimento geral, mas, como eu estou disposto a escrever hoje, eu vou “reinventar a roda” e “re-explicar” em poucas palavras como foi utilizado a técnica de Init-Time Branching na lib.

Como você pode ver, eu tenho a criação de um objeto literal keyValueDatabase dentro do meu escopo da função anônima, com dois atributos: “get” e “set”, sendo ambos setados como “null” inicialmente.

Logo após estes atributos, eu tenho a definição de um método que faz a verificação se existe o suporte para localStorage, e o mesmo não existindo, o método também verifica a presença do suporte a Cookies.

Em ambos, ao encontrar o suporte ideal (seja localStorage ou Cookies), os atributos inicialmente setados como “null”, são redefinidos como métodos para funcionar exatamente da mesma maneira, só que com o armazenamento de dados em background, diferenciado.

Para utilizar os métodos você só precisaria chamar:

keyValueDatabase.set('indice', 'valor');

// Retornando
var valorSalvo = keyValueDatabase.get('indice');
console.log(valorSalvo);

Desta forma, você estaria armazenado seus dados de forma única e a lib fez todo o trabalho para que você salvasse ou com localStorage ou com cookies.

Uma dica final: Você pode ter notado que mesmo não passando por localStorage e Cookies, ainda existe no código o “else” final, onde não haverá suporte para nenhuma das duas opções. Previna este tipo de situação! Lembre-se que não é por que um browser não tem suporte a uma tecnologia que todos os outros são provavelmente terão! Lembre-se disso!

E aí? Gostou?
Ainda tá com dúvidas?
Comenta aí!

Página 1 de 712345...Última »