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