时间戳

首页 > 解决方案 > 即使在Angular中刷新后如何保存数据

angular - 即使在Angular中刷新后如何保存数据

问题描述

在刷新之前我设法获取可观察数据并在 html 中显示它但是如果我刷新页面我会丢失所有可观察数据，有没有办法保存状态并且即使在页面刷新之后也能够获取数据。

这是我的共享服务

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

import { Supplier } from '../components/selectsupplier/selectsupplierObj';

@Injectable({
  providedIn: 'root'
})
export class SharedService {

private availablesuppliers = new BehaviorSubject<Supplier[]>(null);

constructor() { }

loadSuppliers(suppliers: Supplier[]){
  this.availablesuppliers.next(suppliers);
}

getSuppliers(): Observable<Supplier[]> {
  return this.availablesuppliers.asObservable();
  }
}

这是我获取数据并显示它的组件

 getSupplierID(){
 let supplierID = this.route.snapshot.paramMap.get('id');
 return (supplierID);
 }

 ngOnInit() {
// call function on page load
this.report();
this.SupplierID = this.getSupplierID();
// console.log(typeof(this.SupplierID));
// localStorage.setItem('supplierid', this.SupplierID);

this.Auth.authStatus.subscribe(value => this.loggedIn = value);
this.shared.getSuppliers()
.pipe(
  map(suppliers =>
    // console.log("suppliers", suppliers)
    suppliers.filter(supplier => supplier.SupplierID === this.SupplierID),take(1),
  )
)
.subscribe(response => {
  // console.log("From shared services", response);
  // console.log(this.SupplierID);
  this.supplier = response;

});

所以在第一次运行供应商时填充了数据，但是当我刷新供应商时返回为空。

更新代码，将数据保存在本地存储中，然后检索它以显示

ngOnInit() {
// call function on page load
this.report();
this.SupplierID = this.getSupplierID();
// console.log(typeof(this.SupplierID));
// localStorage.setItem('supplierid', this.SupplierID);

this.Auth.authStatus.subscribe(value => this.loggedIn = value);
this.shared.getSuppliers()
.pipe(
  map(suppliers =>
    // console.log("suppliers", suppliers)
    suppliers.filter(supplier => supplier.SupplierID ===   this.SupplierID),take(1),
  )
)
.subscribe(response => {
  // console.log("From shared services", response);
  // console.log(this.SupplierID);
  // this.supplier = response;

  localStorage.setItem('supplierObject',  JSON.stringify(response));
  var retrievedObject = localStorage.getItem('supplierObject');

  this.supplier = JSON.parse(retrievedObject);

  console.log("Object from localStorage", this.supplier);

});

}

标签： angularobservable

解决方案

谢谢大家，在您的帮助下，我设法存储在 localStorage 并修复了错误并重构了代码

 getSupplierID(){
 let supplierID = this.route.snapshot.paramMap.get('id');
 return (supplierID);
 }

 ngOnInit() {
   //call function on page load
   this.Numeric();

   this.SupplierID = this.getSupplierID();

   //fnc call
   this.service(this.SupplierID);

   //retrive object and store in supplier
   var retrievedObject = localStorage.getItem('supplierObject');
   this.supplier = JSON.parse(retrievedObject);
 }

 //get the observable and store in localStorage
 service(id){
   this.Auth.authStatus.subscribe(value => this.loggedIn = value);
   this.shared.getSuppliers()
   .pipe(
   map(suppliers =>
    // console.log("suppliers", suppliers)
    suppliers.filter(supplier => supplier.SupplierID === id),
   )
 )
 .subscribe(response => {
    // console.log("From shared services", response);
    // console.log(this.SupplierID);
    // this.supplier = response;

    localStorage.setItem('supplierObject', JSON.stringify(response));
   });
 }

推荐阅读