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 objetoWindow
, olocalStorage
também é global. Todos nós podemos usar essas funções sem acessar aWindow
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 aosetItem()
;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()
eclear()
; - Sendo que todos eles seguem os mesmos conceitos abordados no método
set()