页面刷新后保存并保留下拉值 PrimeNG

Question

PrimeNG的下拉项在页面刷新后如何保存并保持下拉值？

https://www.primefaces.org/primeng/#/dropdown

HTML

<p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"></p-dropdown>

TypeScript

   import {SelectItem} from 'primeng/api';

    interface City {
      name: string;
      code: string;
    }

    export class MyModel {
        cities2: City[];
        selectedCity2: City;

        constructor() {
            //An array of cities
            this.cities2 = [
                {name: 'New York', code: 'NY'},
                {name: 'Rome', code: 'RM'},
                {name: 'London', code: 'LDN'},
                {name: 'Istanbul', code: 'IST'},
                {name: 'Paris', code: 'PRS'}
            ];
        }
       ngOnInit(){
        localStorage.setItem('key', this.selectedCity2);
        const getItem = localStorage('key');
        this.selectedCity2 = getItem;


    }

Answer 1

首先，要在（或从）localStorage 中设置（或获取）一个 javascript 对象，请使用 JSON.stringify（或 JSON.parse）方法。

然后，在 ngOnInit 方法中，您应该只获取存储在 localStorage 中的值，并且您不能像在代码中那样更新它。

所以这个方法变成了：

  ngOnInit() {
    // get localStorage value
    this.selectedCity2 = JSON.parse(localStorage.getItem('key'));
  }

最后，每次 select dropdown 元素中的项目时，您都必须像这样更新 localStorage 中的值：

  saveInLocalStorage() {
    // update localStorage value
    localStorage.setItem('key', JSON.stringify(this.selectedCity2));
  }

见StackBlitz

页面刷新后保存并保留下拉值 PrimeNG

Save and keep dropdown values after page refresh PrimeNG

local-storage

typescript

primeng

angular

primeng-dropdowns