Question

我正在为设置表单设置本地存储，并希望在我的应用程序的本地存储中设置并获取该表单的每个值。我需要添加什么来进行设置并正确获取此表单？每个人都可以看到获取结果有错误，并且可能设置不正确。如何使所有这些工作我需要更改设置并获取方法吗？我有什么想念的吗？我尽力了，但是我是本地存储和离子技术的初学者。

我的文件ts：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

    import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, NgForm, FormControl, ValidatorFn, AbstractControl } from '@angular/forms';
import { ToastController } from 'ionic-angular';
import { EspaceAgentPage } from '../espace-agent/espace-agent';
import { EspaceCitoyenPage } from '../espace-citoyen/espace-citoyen';
import { ChangePasswordPage } from '../change-password/change-password';
import { Storage } from '@ionic/storage';
import { PasswordService } from '../services/password.service';
import { NgModule } from '@angular/core';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
export class SettingsPage {
  private Form : FormGroup;
  public mail: any;
  public tel: any;
  public data: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, private formBuilder: FormBuilder, public storage: Storage)
  {
    this.Form = formBuilder.group({
      mailadress: ['', Validators.compose([Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$'),Validators.email])],
      telephone: ['', Validators.compose([ Validators.pattern('[0-9]*'), Validators.minLength(8), Validators.maxLength(8)])],
    });

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SettingsPage');
      this.getValue("stoker");
  }

  // set a key/value
  setValue(key: string, value: any)
  {
    this.storage.set(key, value).then((response) => {
      console.log('set' + key + ' ', response);

    }).catch((error) => {
      console.log('set error for ' + key + ' ', error);
    });
  }

  // get a key/value pair
    getValue(key: string) {
      this.storage.get(key).then((val) => {
        console.log('get ' + key + ' ', val);
        this.data[key] = "";
        this.data[key] = val;
      }).catch((error) => {
        console.log('get error for ' + key + '', error);
      });
    }


  onChangepassword()
  {
    this.navCtrl.push(ChangePasswordPage);
  }

  onSubmit(form: NgForm)
  {

    this.mail=this.Form.get('mailadress').value;
    this.tel=this.Form.get('telephone').value;
    console.log(form.value);
    this.setValue("stoker",this.mail);
    this.setValue("stoker",this.tel);

    this.navCtrl.push(EspaceCitoyenPage);
    const toast = this.toastCtrl.create({
      message: 'Modifications Enregistrées !',
      duration: 4000
    });
    toast.present();
  }
}

控制台结果捕获：

capture

Answer 1

似乎您在此功能中遇到了错误

// get a key/value pair
getValue(key: string) {
  this.storage.get(key).then((val) => {
    console.log('get ' + key + ' ', val);
    this.data[key] = "";
    this.data[key] = val;
  }).catch((error) => {
    console.log('get error for ' + key + '', error);
  });
}

当您尝试获取存储密钥时，将返回空引用，然后返回错误。也许您没有为此钥匙存储任何物品，或者当您致电存储时托盘尚未准备好。

当您围绕存储工作时，应从平台上等待以备就绪，如下所示：

import { Platform } from '@ionic/angular';
import { NativeStorage } from '@ionic-native/native-storage/ngx';

-----

constructor(private storage: NativeStorage, private plt: Platform) {}

  this.plt.ready().then(() => {
     // call native storage
  });

并且认为使用本机存储比使用离子存储更好。

希望这对您有所帮助。

Answer 2

请参阅this

import { NativeStorage } from '@ionic-native/native-storage/ngx';

constructor(private nativeStorage: NativeStorage) { }

import { NativeStorage } from '@ionic-native/native-storage/ngx';

constructor(private nativeStorage: NativeStorage) { }
 
this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

this.nativeStorage.getItem('myitem')
  .then(
    data => console.log(data),
    error => console.error(error)
  );

this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

this.nativeStorage.getItem('myitem')
  .then(
    data => console.log(data),
    error => console.error(error)
  );

Answer 3

localstorage.setitem('your key as your wish',your value),

所有存储值都存储在字符串中例如；-

localstorage.setitem('key', value)
localstorage.getitem('key')

您可以使用

Windows.localstorage.setitem('key', value)

如何在本地存储中设置和获取此表格的值

3 个答案: