我想使用本地或会话存储来保存angular 2.0.0.中的身份验证令牌我使用angular2-localstorage但它只工作角度2.0.0-rc.5当我在2.0.0中使用它时它通过我输入错误。我想使用Angular 2.0.0的默认本地存储。
保存到本地存储
localStorage.setItem('currentUser', JSON.stringify({ token: token, name: name }));
从本地存储加载
var currentUser = JSON.parse(localStorage.getItem('currentUser'));
var token = currentUser.token; // your token
这完全取决于你需要什么。如果您只需要存储和检索令牌以便在您的http请求中使用它，我建议您只需创建一个服务并在整个项目中使用它。
基本集成的例子：
import {Injectable} from 'angular@core'
@Injectable()
export class TokenManager {
private tokenKey:string = 'app_token';
private store(content:Object) {
localStorage.setItem(this.tokenKey, JSON.stringify(content));
}
private retrieve() {
let storedToken:string = localStorage.getItem(this.tokenKey);
if(!storedToken) throw 'no token found';
return storedToken;
}
public generateNewToken() {
let token:string = '...';//custom token generation;
let currentTime:number = (new Date()).getTime() + ttl;
this.store({ttl: currentTime, token});
}
public retrieveToken() {
let currentTime:number = (new Date()).getTime(), token = null;
try {
let storedToken = JSON.parse(this.retrieve());
if(storedToken.ttl < currentTime) throw 'invalid token found';
token = storedToken.token;
}
catch(err) {
console.error(err);
}
return token;
}
}
但是，如果您需要更频繁地使用本地存储，例如使用应用程序视图中存储的值。您可以使用其中一个库提供webstorage的包装器，就像使用angular2-localstorage一样。
几个月前我创建了ng2-webstorage应该满足你的需求。它提供了两个ng2服务和两个装饰器来同步webstorage的值和服务/组件的属性。
import {Component} from '@angular/core';
import {LocalStorageService, LocalStorage} from 'ng2-webstorage';
@Component({
selector: 'foo',
template: `
<section>{{boundValue}}</section>
<section><input type="text" [(ngModel)]="attribute"/></section>
<section><button (click)="saveValue()">Save</button></section>
`,
})
export class FooComponent {
@LocalStorage()
boundValue; // attribute bound to the localStorage
value;
constructor(private storage:LocalStorageService) {
this.localSt.observe('boundValue')// triggers the callback each time a new value is set
.subscribe((newValue) => console.log('new value', newValue));
}
saveValue() {
this.storage.store('boundValue', this.value); // store the given value
}
}
我们可以像这样存储会话存储
商店令牌应该是这样的
localStorage.setItem('user', JSON.stringify({ token: token, username: username }));
将会话存储到sessionStorage
您可以将字符串和数组存储到会话存储中
字符串例
let key = 'title';
let value = 'session';
sessionStorage.setItem(key, value);
阵列Ex。
let key = 'user';
let value = [{'name':'shail','email':'[email protected]'}];
value = JSON.stringify(value);
sessionStorage.setItem(key, value);
按键从sessionStorage获取存储的会话
const session = sessionStorage.getItem('key');
按键从sessionStorage中删除已保存的会话
sessionStorage.removeItem('key');
从sessionStorage中删除所有已保存的会话
sessionStorage.clear();
将项目存储到localStorage
您可以将字符串和数组存储到位置存储中
字符串例
let key = 'title';
let value = 'session';
localStorage.setItem(key, value);
阵列Ex。
let key = 'user';
let value = [{'name':'shail','email':'[email protected]'}];
value = JSON.stringify(value);
localStorage.setItem(key, value);
按键从localStorage获取存储的项目
const item = localStorage.getItem('key');
按键从localStorage删除已保存的会话
localStorage.removeItem('key');
从localStorage中删除所有已保存的项目
localStorage.clear();
作为一般规则，令牌不应该存储在localStorage和sessionStorage上。这两个地方都可以从JS访问，JS不应该关心身份验证令牌。
恕我直言令牌应该存储在一个cookie上，其中包含HttpOnly和Secure标志，如下所示：https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage
这是最好的做法：https://github.com/PillowPillow/ng2-webstorage
我在AngularJs中使用它，现在使用Angular2。很有用。
加入Bojan Kogoj的回答：
在app.module.ts中，添加一个新的存储提供程序。
@NgModule({
providers: [
{ provide: Storage, useValue: localStorage }
],
imports:[],
declarations:[]
})
然后您可以使用DI在任何需要的地方使用它。
@Injectable({
providedIn:'root'
})
export class StateService {
constructor(private storage: Storage) { }
}
import { Injectable,OpaqueToken } from '@angular/core';
export const localStorage = new OpaqueToken('localStorage');
将这些行放在文件的顶部，它应该解决问题。
var arr=[{"username":"sai","email":"[email protected],"}]
localStorage.setItem('logInArr', JSON.stringfy(arr))
简单的例子：
var userID = data.id;
localStorage.setItem('userID',JSON.stringify(userID));