Cordova - Armazenamento

Podemos usar a API de armazenamento disponível para armazenar dados nos aplicativos clientes. Isso ajudará no uso do aplicativo quando o usuário estiver offline e também pode melhorar o desempenho. Como este tutorial é para iniciantes, mostraremos como usarlocal storage. Em um de nossos tutoriais posteriores, mostraremos os outros plug-ins que podem ser usados.

Etapa 1 - Adicionando botões

Vamos criar quatro botões no index.htmlArquivo. Os botões estarão localizados dentro dodiv class = "app" elemento.

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>

Isso produzirá a seguinte tela -

Etapa 2 - Adicionar ouvintes de eventos

A política de segurança do Cordova não permite eventos embutidos, portanto, adicionaremos ouvintes de eventos dentro dos arquivos index.js. Também iremos atribuirwindow.localStorage para um localStorage variável que usaremos mais tarde.

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); 
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); 
document.getElementById("removeProjectFromLocalStorage").addEventListener 
   ("click", removeProjectFromLocalStorage); 
document.getElementById("getLocalStorageByKey").addEventListener 
   ("click", getLocalStorageByKey);  
var localStorage = window.localStorage;

Etapa 3 - Criação de funções

Agora precisamos criar funções que serão chamadas quando os botões forem tocados. A primeira função é usada para adicionar dados ao armazenamento local.

function setLocalStorage() { 
   localStorage.setItem("Name", "John"); 
   localStorage.setItem("Job", "Developer"); 
   localStorage.setItem("Project", "Cordova Project"); 
}

O próximo irá registrar os dados que adicionamos ao console.

function showLocalStorage() { 
   console.log(localStorage.getItem("Name")); 
   console.log(localStorage.getItem("Job")); 
   console.log(localStorage.getItem("Project")); 
}

Se tocarmos SET LOCAL STORAGEbotão, definiremos três itens para armazenamento local. Se tocarmosSHOW LOCAL STORAGE depois, o console registrará os itens que desejamos.

Vamos agora criar uma função que excluirá o projeto do armazenamento local.

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

Se clicarmos no SHOW LOCAL STORAGE depois de excluir o projeto, a saída mostrará null valor para o campo do projeto.

Também podemos obter os elementos de armazenamento local usando o key() método que tomará o índice como um argumento e retornará o elemento com o valor de índice correspondente.

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

Agora, quando tocamos no GET BY KEY botão, a seguinte saída será exibida.

NOTA

Quando usamos o key() método, o console irá registrar o job ao invés de name mesmo que tenhamos passado no argumento 0para recuperar o primeiro objeto. Isso ocorre porque o armazenamento local está armazenando dados em ordem alfabética.

A tabela a seguir mostra todos os métodos de armazenamento local disponíveis.

S.Não	Métodos e detalhes
1	setItem(key, value) Usado para definir o item para armazenamento local.
2	getItem(key) Usado para obter o item do armazenamento local.
3	removeItem(key) Usado para remover o item do armazenamento local.
4	key(index) Usado para obter o item usando o indexdo item no armazenamento local. Isso ajuda a classificar os itens em ordem alfabética.
5	length() Usado para recuperar o número de itens que existem no armazenamento local.
6	clear() Usado para remover todos os pares de chave / valor do armazenamento local.