HTML5 - armazenamento do navegador

Ao trabalhar com páginas web há momentos em que precisamos utilizar dados que persistem durante a navegação do usuário, porém não queremos ou não podemos utilizar bancos de dados, para isso podemos utilizar o armazenamento no navegador.
Armazenamento do navegador
O navegador permite-nos armazenar uma quantidade considerável de dados com as diferentes ferramentas que nos oferece. HTML5, a decisão de usar um ou outro passa pela definição do que queremos fazer.
Dos diferentes tipos de armazenamento que podemos usar, vamos destacar o armazenamento local, com este tipo de armazenamento podemos salvar diferentes associações de valores-chave com o qual podemos manter uma persistência de dados do usuário em seu computador local de onde você acessa a página HTML5.
Armazenamento Local
Para usar o armazenamento local nós dependemos da propriedade global localStorage, disse propriedade nós retorna um objeto Storage em que teremos as diferentes associações de valor-chave que mencionamos acima.
Quando decidirmos trabalhar com este tipo de armazenamento poderemos contar com seus diferentes métodos para poder construir as funcionalidades que necessitamos, por isso devemos conhecê-las, vamos ver abaixo os métodos que temos neste tipo de armazenamento local.

• Claro (): Este método nos permite limpar todas as associações armazenadas em nosso objeto.
• getItem (): Ele nos permite obter o valor da associação usando uma chave que passamos como parâmetro.
• chave (): Permite-nos obter a chave da associação utilizando a sua posição para tal.
• comprimento: Ele indica a quantidade de elementos de valor-chave que armazenamos no momento.
• remover item (): Em vez de limpar todos os elementos com clear (), com este método podemos remover elementos específicos usando sua chave como identificador.
• setItem (,): Este método nos permite adicionar uma nova associação ou atualizar uma se a chave que colocamos já existe.
• []: Ele nos permite acessar o conteúdo de uma das associações na forma de um array.

Muito bom agora que conhecemos os métodos que temos, vamos fazer um código de demonstração com o qual aprenderemos a usar o armazenamento local:

 ExemploChave:Valor:Adicionar Limpar
Existem elementos

 
Elementos:
-

 

 

Neste exemplo, construímos uma funcionalidade que nos permite escrever valores em campos de tipo de texto de entrada e, em seguida, por meio de funções para poder armazenar esses valores localmente.
Vamos ver como fica em nosso navegador:

Podemos notar como podemos adicionar uma série de elementos e, então, podemos percorrê-los para mostrá-los.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo