Question

目前正在制作我的第一个打字稿应用程序。

我不知不觉地想出了将我的http共鸣数据保存1周的想法。如果数据较旧，那么1周我想开始一个新的http请求。

目前我只是将数据存储在一个变量中，我的代码就像这样：

export class ExerciseData {
  data: any;

  constructor(private http: Http) {
  }

  getExerciseList(): any {
    if (this.data) {
      return Promise.resolve(this.data);
    }

    return new Promise(resolve => {
      this.http.get('https://test.test/api-exercise-v1/')
          .map(res => res.json())
          .subscribe(data => {
            this.data = data;
            resolve(this.data);
          });
    });
  }
}

现在我想将数据保存到localstorage一周。

存档的最佳方式是什么？

我还需要触摸构造函数吗？

添加：我需要将数据保存到带有日期的localstorage，然后检查存储的数据是否超过7天。但我不知道如何:(

Answer 1

请查看working plunker。在该演示中，我使用localStorage来存储项目列表以及获取这些项目的日期。请注意，由于获取和设置localStorage中的数据都会返回Promise，因此我们需要使用then((result) => {...})方法来处理这些值。

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import { Storage, LocalStorage } from 'ionic-angular/index';
import 'rxjs/Rx';

@Injectable()
export class DataService {

  constructor(private http:Http) {
    this.local = new Storage(LocalStorage);
  }

  getExerciseList(): any {

    return new Promise(resolve => {

      // Check if we have the list in the local storage
      this.local.get('ExerciseList').then((list) => {
        if(list) {
          // We have a list, so we try to find out the date
          this.local.get('ExerciseListDate').then((date) => 
          {
            if(date && this.newerThanAWeek(date)) {
              // The data is valid, so we don't do the http request
              console.log("Data retrieved from localStorage");
              resolve(JSON.parse(list));
            } else {
              // Data is old, so we make the Http request
              this.http.get('https://jsonplaceholder.typicode.com/users')
                  .map(res => res.json())
                  .subscribe(listDataFromServer => {
                    console.log("Return HTTP Request");
                    // Save this information to use it later                     
                    this.saveInfoInLocalStorage(listDataFromServer).then(() => {
                      // Data is saved now, so we can send it to the user
                      resolve(listDataFromServer);
                    });
                  });
            }
          });
        } else {
            // We don't have the list stored so we make the Http request
            this.http.get('https://jsonplaceholder.typicode.com/users')
                .map(res => res.json())
                .subscribe(listDataFromServer => {
                  console.log("Return HTTP Request");
                  // Save this information to use it later                      
                  this.saveInfoInLocalStorage(listDataFromServer).then(() => {
                    // Data is saved now, so we can send it to the user
                    resolve(listDataFromServer);
                  });
                });
        }
      });
    });
  }

  public saveInfoInLocalStorage(data: Array<any>) {
    // Save the list first
    return this.local.set('ExerciseList', JSON.stringify(data)).then(() => {
      // Now we set the date
      this.local.set('ExerciseListDate', new Date());
    });
  }

  public newerThanAWeek(storedDateStr: string) {
    let today = new Date();
    let storedDate = new Date(storedDateStr);
    let timeDiff = Math.abs(today.getTime() - storedDate.getTime());
    let diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

    if(diffDays < 7) {
      return true;
    }
    return false;

  }
}

Answer 2

只需添加timeout即可将ExerciseData.data设置为null，并在getExerciseList()之后在if()中将其调用。

getExerciseList(): any { if (this.data) { return Promise.resolve(this.data); } timeout(() => { this.data = null; }, 7*24*60*60*1000); // ... 更确切地说，当您拥有数据时，应将其添加到Promise中。例如，在resolve(this.data);

之后

所以这是一个关于cookie的问题，而不是http响应缓存。

如果您不知道如何使用Cookie，请使用类似here.的内容并将过期时间设置为7天，因此当您在7天内阅读Cookie时，它将为空并且您从服务器获取数据

Answer 3

你可以在你的应用程序中设置一个包含一段html数据和一个到期日期的模型，然后当从http请求中获取数据时，使用localStorage.set('key', data);保存本地存储 - 它们的关键可能是如果您有能力让不同的用户在同一设备上登录您的应用程序，或者如果不能用某种用户ID，则可以使用您从请求中获取的资源来识别此数据。

因此，当用户然后对该相同数据执行另一个请求时，首先轮询localStorage并根据当前日期检查数据中的日期 - 有很多方法可以从js Date类构建到库中例如moment.js，如果有效期限仍然存在，请使用localStorage.get('key');加载数据。如果到期日已过，那么您知道数据现在已过期，您可以通过http请求数据并再次开始循环。

打字稿：在有限的时间内保存http响应

3 个答案: