Angular 2中的本地存储

Question

我需要将数据存储在浏览器的会话中并检索数据，直到会话退出。你如何在Angular 2中使用本地和会话存储？

Answer 1

使用Angular2 @LocalStorage模块，它被描述为：

这一点Angular2 /打字稿装饰使它超级容易保存 和使用HTML5' 的localStorage在你的指令（类 属性）自动恢复变量状态。

如果需要使用Cookie，你应该看看： https://www.npmjs.com/package/angular2-cookie

Answer 2

标准localStorage API应该可以，只是做例如： -

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

这是pretty widely supported。

请注意，如果您尚未拥有它，则需要将"dom"添加到您的tsconfig.json中的"lib"阵列。

Answer 3

正如上面所说的，应该是：localStorageService.set('key', 'value');和localStorageService.get('key');

Answer 4

要存储在本地存储数据，

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

确保字符串化的值，例如，如果你有一个对象
localStorage.setItem(itemName, JSON.stringify(itemData));

或个别键值对
localStorage.setItem('currentUser', JSON.stringify({ token: token, name: name }));

并且从本地存储中检索数据
user = JSON.parse(localStorage.getItem(currentUser));

Answer 5

我们可以很容易地使用localStorage来设置数据和接收数据。

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';