Question

我创建了一种更改应用程序主题的方法。

我试图将主题变量传递给localstorage，但没有成功，没有效果。

我想将条件的结果保存在本地存储中，因此，如果我更改路线，可以看到以前设置的相同主题。

  @HostBinding('class.light-theme') lightTheme: boolean = false;
  @HostBinding('class.dark-theme') darkTheme: boolean = true;
  theme: string = 'Dark';

  toggleTheme(): void {

    if (this.theme === 'Light') {
      this.lightTheme = false;
      this.darkTheme = true;
      this.theme = 'Dark';
    } else {
      this.darkTheme = false;
      this.lightTheme = true;
      this.theme = 'Light';
    }
  }
}

Answer 1

这应该有效：

  theme: string = localStorage.getItem('theme');
  @HostBinding('class.light-theme') lightTheme: boolean = this.theme === 'Light';
  @HostBinding('class.dark-theme') darkTheme: boolean = this.theme === 'Dark';

  toggleTheme(): void {

    if (this.theme === 'Light') {
      this.lightTheme = false;
      this.darkTheme = true;
      this.theme = 'Dark';
    } else {
      this.darkTheme = false;
      this.lightTheme = true;
      this.theme = 'Light';
    }
    localStorage.setItem('theme', this.theme);
  }
}

您可能应该通过依赖项注入来注入localStorage，但这就是其他主题。

Answer 2

您可以像这样使用它-> localStorage.setItem（'name'，item）; https://developer.mozilla.org/de/docs/Web/API/Window/localStorage

Answer 3

您还可以使用角度存储npm页面来存储数据。

store.set（'number'，2）

https://www.npmjs.com/package/angular-storage

使用和阅读都很简单。

主要优点是您可以存储对象，数字等

如何在本地存储中设置主题？

3 个答案: