Angular Local Storage

• Local Storage pode ser usado no Angular da mesma forma que qualquer outro aplicativo JavaScript.
• Local Storage é um armazenamento no navegador que tem espaço alocado para cada domínio.
• Os dados podem ser armazenados no navegador do lado do cliente usando HTML5 e são suportados em todos os navegadores modernos.

O armazenamento local pode ser limpo manualmente pelo usuário, bem como através da API Javascript LocalStorage ou da guia Developer Tools Application.

localstorage getitem

Como funciona o localStorage?

Primeiro já podemos acessar o localStorage através de uma instância disponível para nós globalmente. Assim conseguimos chamar todos os métodos necessários a partir dessa instância. E você possui 4 métodos básicos para trabalhar com os dados armazenados:

			
					setItem(key: string, data: string | JSON): void

			
	

			
	
			

		
	

Leva um parâmetro de chave e um parâmetro de valor. A chave permite que você recupere o valor mais tarde usando pesquisas. O valor é armazenado como uma sequência JSON. Este método não retorna nada.

			
					getItem(key: string): string | JSON | null

			
	

			
	
			

		
	

É preciso um parâmetro chave para procurar dados no armazenamento. Se essa busca falhar, ela devolverá um valor nulo.

			
					removeItem(key: string): undefined

			
	

			
	
			

		
	

É preciso um parâmetro chave para procurar dados no armazenamento. Este método sempre retorna indefinido.

			
					clear(): undefined

			
	

			
	
			

		
	

Não precisa de parâmetros. Limpa todos os dados no armazenamento local. Este método sempre retorna indefinido. Uma maneira comum de definir dados no armazenamento local, obtê-lo e removê-lo.

Embora o localStorage exista no objeto Window , o localStorage também é global. Todos nós podemos usar essas funções sem acessar a Window primeiro

			
					setData(data) {
   const jsonData = JSON.stringify(data)
   localStorage.setItem('myData', jsonData)
}

getData() {
   return localStorage.getItem('myData')
}

removeData(key) {
   localStorage.removeItem(key)
}

			
	

			
	
			

		
	

Você pode executar o comando a partir do CLI Angular

			
					ng generate service local-storage

			
	

			
	
			

		
	

			
					import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {
   ...
   setInfo(data: MyData) {
      const jsonData = JSON.stringify(data)
      this._localStorage.setItem('myData', jsonData)
      this._myData$.next(data)
   }

   loadInfo() {
      const data = JSON.parse(this._localStorage.getItem('myData'))
      this._myData$.next(data)
   }

   clearInfo() {
      this._localStorage.removeItem('myData')
      this._myData$.next(null)
   }

   clearAllLocalStorage() {
      this._localStorage.clear()
      this.myData$.next(null)
   }
}

			
	

			
	
			

		
	

localstorage angular 8

			
					setInfo(data: MyData) {
   const jsonData = JSON.stringify(data)
   this._localStorage.setItem('myData', jsonData)
   this._myData$.next(data)
}

			
	

			
	
			

		
	

• JSON.stringify() antes de passar o valor ao setItem();
• JSON.parse() para ler o objeto depois.

localstorage getitem angular

• Se você deseja criar um verdadeiro serviço Angular para localStorage, precisa implementar os métodos básicos de manipulação como: get(), remove() e clear();
• Sendo que todos eles seguem os mesmos conceitos abordados no método set()