存储并将API数据更新到本地存储中，以获取快速预处理页面

Question

我正在构建与ASP.NET Core集成的Angular 4的比特币图。我从API端点（https://www.coindesk.com/api/）中提出了http请求，该请求返回数据以可视化图表。每次我重新加载页面时，图表显示总是在1-2秒钟左右延迟，因为它从服务器中提取数据。我想请其他解决方案来防止这种情况，主要目的是使图表快速预先渲染与模板上的纯文本相同。因此，我正在考虑将API数据存储到本地存储中，因此重新加载页面从本地存储中提取数据，从而可以快速渲染。可以这样做吗？

这是我当前的代码：

历史bpi.service.ts：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class HistoricalBpiService {
  private JsonBaseUrl: string = 'https://api.coindesk.com/v1/bpi/';
  constructor(private http:Http) { }
  getBpiData(url: string){
    return this.http.get(this.JsonBaseUrl+url)
      .map(res => res.json());
  }
}

组件TS：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import * as moment from 'moment';
@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {
  private isDataAvailable: boolean;
  // Define date options
  private today: string = moment().format('YYYY-MM-DD');
  private oneYearAgo: string = moment().subtract(1,'years').format('YYYY-MM-DD');
  private nineMonthsAgo: string = moment().subtract(9,'months').format('YYYY-MM-DD');
  private oneYearData: string = 'historical/close.json?start=' + this.oneYearAgo + '&end=' + this.today;
  private nineMonthsData: string = 'historical/close.json?start=' + this.nineMonthsAgo + '&end=' + this.today;      
  // API calls for the date options
  oneYear() {
    this.historicalBpiService.getBpiData(this.oneYearData)
      .subscribe(
        res => {
          this.lineChartData[0].data = Object.keys(res.bpi).map(function (key) { return res.bpi[key]; });
          this.lineChartLabels = Object.keys(res.bpi);
          this.isDataAvailable = true;
        }
      )
  }
  nineMonths() {
    this.historicalBpiService.getBpiData(this.nineMonthsData)
      .subscribe(
        res => {
          this.lineChartData[0].data = Object.keys(res.bpi).map(function (key) { return res.bpi[key]; });
          this.lineChartLabels = Object.keys(res.bpi);
        }
      )
  }      
  constructor(
    private historicalBpiService:HistoricalBpiService,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}
  // lineChart
  public lineChartData:any = [
    { data:[], label: 'BTC' }
  ];
  public lineChartLabels:Array<any> = [];
  public lineChartOptions:any = {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: 0
    },        
    scales: {
      yAxes: [{
        display: false,
        scaleLabel: {
          display: false,
          labelString: 'USD'
        },            
        gridLines: {
          display: true,
          tickMarkLength: 0
        }
      }],
      xAxes: [{
        ticks: {
          display: false,
          mirror: true
        }          
      }]
    },
    elements: {
      point: {
        radius: 0
      },
      line: {
        tension: 0, // 0 disables bezier curves
      }
    },
    hover: {
      mode: 'label',
      intersect: false
    },
    tooltips: {
      mode: 'label',
      intersect: false,
      backgroundColor: 'rgb(95,22,21)'          
    }
  };
  public lineChartColors:Array<any> = [
    {
      backgroundColor: 'rgba(199,32,48,1)',
      //borderColor: 'rgb(95,22,21)',
      pointHoverBackgroundColor: 'rgba(218,208,163,1)',
      steppedLine: false
    }
  ];
  public lineChartLegend:boolean = false;
  public lineChartType:string = 'line';    
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }
  public chartHovered(e:any):void {
    console.log(e);
  }
  ngOnInit(){
    if (isPlatformBrowser(this.platformId)) {
      // Default chart
      this.oneYear();
    }
  }
}

组件html：

<div class="chart">
      <canvas baseChart height="360px"
        [datasets]="lineChartData"
        [labels]="lineChartLabels"
        [options]="lineChartOptions"
        [colors]="lineChartColors"
        [legend]="lineChartLegend"
        [chartType]="lineChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
      </canvas>
    </div>
    <div class="d-flex justify-content-end dateOptions" *ngIf="isDataAvailable">      
      <input type="radio" name="Button" class="ButtonState" checked id="9months"/>
      <label class="Button" for="9months" (click)="nineMonths()">9 Months</label>
      <input type="radio" name="Button" class="ButtonState" checked id="1year"/>
      <label class="Button" for="1year" (click)="oneYear()">1 Year</label>
    </div>

Answer 1

根据本文，localstorage值的最大大小是什么？每个存储的限制是10MB，并且值只能存储为字符串。

如果您监视了应用程序，并且调用是瓶颈（不是渲染或应用程序开始），我建议使用pouchdb/couchdb之类的东西，为您提供本地文档存储。https://pouchdb.com/