Локальное хранилище в Angular 2

Question

Мне нужно хранить данные в сеансе браузера и извлекать данные до выхода сеанса. Как вы используете локальное и сеансовое хранилище в Angular 2?

Answer 1

Используйте Angular2 @LocalStorage модуль, который описывается как:

Этого маленький Angular2/машинопись декоратор делает его очень легко сохранить и восстановить автоматически переменные состояния в вашей директиве (класс свойства) с использованием LocalStorage HTML5' ,

Если вам нужно использовать куки, вы должны смотреть на: https://www.npmjs.com/package/angular2-cookie

Answer 2

Стандарт localStorage API должен быть доступен, только сделайте например .:

localStorage.setItem('whatever', 'something'); 

Это pretty widely supported.

Обратите внимание, что вам нужно будет добавить "dom" в массив "lib" в вашем tsconfig.json, если у вас его еще нет.

Answer 3

Как было сказано выше, должно быть: localStorageService.set('key', 'value'); и localStorageService.get('key');

Answer 4

Для хранения данных в локальной системе хранения данных,

localStorage.setItem('key', 'value'); 

Убедитесь, что stringify значение, например, если у вас есть объект
localStorage.setItem(itemName, JSON.stringify(itemData));

ИЛИ для отдельных пар ключ-значение
localStorage.setItem('currentUser', JSON.stringify({ token: token, name: name }));

И для получение данных из localstorage
user = JSON.parse(localStorage.getItem(currentUser));

Answer 5

Мы можем легко использовать локальную хранилище для установки данных и получения данных.

Note: it works with both angular2 and angular 4 

//set the data 
localStorage.setItem(key, value); //syntax example 
localStorage.setItem('tokenKey', response.json().token); 

//get the data 
localStorage.getItem('tokenKey') 

//confirm if token is exist or not 
return localStorage.getItem('tokenKey') != null; 

Answer 6

Local Storage Set Item 
Syntax:- 
    localStorage.setItem(key,value); 
    localStorage.getItem(key); 
Example:- 
    localStorage.setItem("name","Muthu"); 
    if(localStorage){ //it checks browser support local storage or not 
    let Name=localStorage.getItem("name"); 
    if(Name!=null){ // it checks values here or not to the variable 
     //do some stuff here... 
    } 
    } 
also you can use 
    localStorage.setItem("name", JSON.stringify("Muthu")); 

Session Storage Set Item 
Syntax:- 
    sessionStorage.setItem(key,value); 
    sessionStorage.getItem(key); 
Example:- 
    sessionStorage.setItem("name","Muthu"); 
    if(sessionStorage){ //it checks browser support session storage/not 
    let Name=sessionStorage.getItem("name"); 
    if(Name!=null){ // it checks values here or not to the variable 
     //do some stuff here... 
    } 
    } 
also you can use 
    sessionStorage.setItem("name", JSON.stringify("Muthu")); 

хранение и извлечение данных легко

Answer 7

Вы можете использовать декоратор для обозначения переменных, которые вы хотите сохранить.

export class SomeComponent { 

    @LocalStorage 
    public variableToBeStored: string; 

} 

Пример, как этого достичь в этой статье: https://filipmolcik.com/angular-2-local-storage/.

Answer 8

Save into LocalStorage: 
    localStorage.setItem("key",value); 

    For objects with properties: 
    localStorage.setItem("key",JSON.Stringify(object)); 

    Get From Local Storage: 
    localStorage.getItem("key"); 

    For objects: 
    JSON.parse(localStorage.getItem("key")); 

    This will save as string and retrieve as string. You need to Prase desired output 
    if value is non-string. 
    e.g. parseInt(localStorage.getItem("key")); 

** It is better to use framework provided localStroage instead of 3rd party library localStorageService or anything else. 

Answer 9

Установить "угловой-2-местное-хранилище"

import { LocalStorageService } from 'angular-2-local-storage';