Question

我正在使用Ionic 4通过openweathermap API构建天气应用。我想使用local storage api保存用户所在城市，重新加载页面时保存数据，问题是我重新加载应用程序时未保存数据。

天气提供商

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-weatherprovider',
  templateUrl: './weatherprovider.component.html',
  styleUrls: ['./weatherprovider.component.scss'],
})
export class WeatherproviderComponent implements OnInit {
  public appId = 'xxxxxxxxxxxxxxx'
  public baseUrl='https://api.openweathermap.org/data/2.5/weather'
  constructor(public https: HttpClient) { }

  ngOnInit() {}

  city(city:string){
    let url=this.baseUrl
    url +='?q='+city
    url+='&appId='+this.appId

    return this.https.get(url);
  }

}

home.ts从气象服务提供商获取数据并加载本地存储

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AddPagePage } from '../add-page/add-page.page';
import { HttpClient } from '@angular/common/http';
import { WeatherproviderComponent } from '../weatherprovider/weatherprovider.component';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

 public weatherList = []
  check = ''
  constructor(public modalController: ModalController,public weather : WeatherproviderComponent,
    private storage: Storage){

  }


  // Window Modal for add weather citiis
  async addWeather(){

    const AddWeatherModal = await this.modalController.create({
      component: AddPagePage,

    });

    await AddWeatherModal.present();
    await  AddWeatherModal.onDidDismiss().then((r) => {
        if(r){

          this.getWeather(r.data.result)
          console.log(r.data.result)
        }

    });
  }

  // get weather opeartion form main weather provider
    getWeather(city :string){

    this.weather.city(city).subscribe(data=>{

      this.weatherList.push(data)             
                                 ///  HERE blowe  l use local storage to save city 

       this.storage.set(city, JSON.stringify(city));

      this.storage.get(city).then((val) => {


      console.log('Your city is', val);
        });


    })

   }

}

如何解决此问题？

Answer 1

好的，尝试像这样直接使用本地存储

将import { Component } from '@angular/core';更新为import { Component, OnInit } from '@angular/core';

和

将export class HomePage {更新为export class HomePage implements OnInit {

ngOnInit() {
  let items_json = localStorage.getItem('cities');
  if(items_json) {
     let items = JSON.parse(items_json);
     items.map((item)=>{
        this.weatherList.push(item.data);
     });
  }
}

getWeather(city :string){
  this.weather.city(city).subscribe(data=>{

    this.weatherList.push(data) 

    //  save city with data
    this.saveWeatherEntry(city, data);

    // test the storage, 
    let entry = this.getWeatherEntry(city);
    console.log(city);
    console.log(entry);
  });
}

saveWeatherEntry(city, data) {
  // check if exist before in local storage
  let items_json = localStorage.getItem('cities');
  let items = [];
  if(items_json) {
     items = JSON.parse(items_json);
     let city_index = -1;
     for(let i = 0; i < items.length; i++) {
        if(items[i].city == city) {
          city_index = i;
          break;
        }
     }

     if(city_index != -1) {
        items[city_index].data = data;
     } else {
        items.push({
           city: city,
           data: data
        });
     }

  } else {
     items.push({
        city: city,
        data: data
     });
  }   
  //save changes
  localStorage.setItem('cities', JSON.stringify(items));
}

getWeatherEntry(city) {
  // check if exist before in local storage
  let items_json = localStorage.getItem('cities');
  if(items_json) {
    let items = JSON.parse(items_json);
    let city_index = -1;
    for(let i = 0; i < items.length; i++) {
       if(items[i].city == city) {
         return items[i].data;
       }
    }
  }
  return false;
}

本地存储不保存数据

1 个答案: