如何在Angular应用中保持用户选择的主题，刷新页面不丢失？

完全理解你的痛点——切换主题后一刷新就回到默认，确实很影响用户体验。你考虑用Cookie是个可行的方向，但其实还有更适合前端场景的方案，比如localStorage或sessionStorage，当然Cookie也能搞定，下面给你详细拆解各个方案的实现思路：

方案一：使用localStorage（推荐，持久化存储直到手动清除） #

localStorage是浏览器提供的本地存储API，数据会一直保留在用户设备上，除非用户手动清除浏览器缓存或你主动删除，非常适合保存用户的主题偏好。

具体实现步骤： #

1. 创建主题服务（ThemeService）
   封装主题切换和存储的逻辑，让代码更模块化：

   import { Injectable } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class ThemeService {
     private readonly THEME_KEY = 'user-selected-theme';
     private currentTheme: string = 'light'; // 默认主题
   
     constructor() {
       // 初始化时从localStorage读取保存的主题
       this.loadSavedTheme();
     }
   
     // 加载保存的主题
     private loadSavedTheme(): void {
       const savedTheme = localStorage.getItem(this.THEME_KEY);
       if (savedTheme) {
         this.currentTheme = savedTheme;
         this.applyTheme(savedTheme);
       } else {
         this.applyTheme(this.currentTheme);
       }
     }
   
     // 切换主题并保存
     toggleTheme(newTheme: string): void {
       this.currentTheme = newTheme;
       this.applyTheme(newTheme);
       localStorage.setItem(this.THEME_KEY, newTheme);
     }
   
     // 应用主题到DOM（比如给body加主题类）
     private applyTheme(theme: string): void {
       // 先移除所有主题类
       document.body.classList.remove('light-theme', 'dark-theme', 'blue-theme');
       // 添加当前主题类
       document.body.classList.add(`${theme}-theme`);
     }
   
     // 获取当前主题
     getCurrentTheme(): string {
       return this.currentTheme;
     }
   }
   

2. 在组件中使用服务
   在你的切换按钮组件里注入ThemeService，调用切换方法：

   import { Component } from '@angular/core';
   import { ThemeService } from './theme.service';
   
   @Component({
     selector: 'app-theme-toggle',
     template: `<button (click)="toggleDarkTheme()">切换深色主题</button>`
   })
   export class ThemeToggleComponent {
     constructor(private themeService: ThemeService) {}
   
     toggleDarkTheme(): void {
       const current = this.themeService.getCurrentTheme();
       const newTheme = current === 'light' ? 'dark' : 'light';
       this.themeService.toggleTheme(newTheme);
     }
   }
   

3. 样式配合
   在全局样式文件（比如styles.scss）中定义不同主题的样式：

   body.light-theme {
     background-color: #ffffff;
     color: #333333;
   }
   
   body.dark-theme {
     background-color: #1a1a1a;
     color: #ffffff;
   }
   

方案二：使用Cookie（适合需要和后端交互的场景） #

如果你的场景需要后端也能读取用户主题偏好（比如渲染页面时直接应用主题），Cookie是更好的选择。Angular中可以用ngx-cookie-service库来简化操作，或者原生JS操作Cookie。

实现步骤： #

1. 安装依赖（可选，用库更方便）

   npm install ngx-cookie-service
   

2. 修改ThemeService使用Cookie

   import { Injectable } from '@angular/core';
   import { CookieService } from 'ngx-cookie-service';
   
   @Injectable({ providedIn: 'root' })
   export class ThemeService {
     private readonly THEME_KEY = 'user-theme';
     private currentTheme: string = 'light';
   
     constructor(private cookieService: CookieService) {
       this.loadSavedTheme();
     }
   
     private loadSavedTheme(): void {
       const savedTheme = this.cookieService.get(this.THEME_KEY);
       if (savedTheme) {
         this.currentTheme = savedTheme;
         this.applyTheme(savedTheme);
       } else {
         this.applyTheme(this.currentTheme);
       }
     }
   
     toggleTheme(newTheme: string): void {
       this.currentTheme = newTheme;
       this.applyTheme(newTheme);
       // 设置Cookie，有效期比如30天，path设为根目录确保全站生效
       this.cookieService.set(this.THEME_KEY, newTheme, 30, '/');
     }
   
     // applyTheme方法和之前一样
     private applyTheme(theme: string): void {
       document.body.classList.remove('light-theme', 'dark-theme');
       document.body.classList.add(`${theme}-theme`);
     }
   
     getCurrentTheme(): string {
       return this.currentTheme;
     }
   }
   

3. 注意事项

   • 如果用原生JS操作Cookie，要注意格式和有效期的设置，避免Cookie只在当前路径生效。
   • Cookie有大小限制（约4KB），主题这种短字符串完全没问题。

方案三：使用sessionStorage（临时存储，关闭浏览器就丢失） #

如果你的需求是用户关闭浏览器后就恢复默认主题，可以用sessionStorage，用法和localStorage几乎一致，只是数据只在当前会话有效，关闭标签页或浏览器就会清除。

关键区别 #

把localStorage.getItem()换成sessionStorage.getItem()，localStorage.setItem()换成sessionStorage.setItem()即可，其他代码和方案一完全相同。

额外优化点 #

• 初始化时机：最好在Angular应用启动时就加载主题，比如在AppComponent的ngOnInit里调用ThemeService的加载方法，避免页面闪烁。
• 主题切换动画：可以给body添加过渡动画，让主题切换更平滑：

  body {
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  

• 支持更多主题：可以扩展主题列表，比如添加蓝色、橙色主题，只需要在applyTheme方法里移除更多类，样式文件里对应新增即可。

内容的提问来源于stack exchange，提问作者programoholic