使用@ngxs/storage-plugin存储数据如何设置命名空间避免多实例冲突

方案：自定义带命名空间的存储引擎（官方推荐） #

@ngxs/storage-plugin 原生支持自定义存储实现，我们可以封装一层带自动前缀的存储类，自动为所有存储键加上当前应用的唯一标识（比如base-href转换后的字符串），完全避免实例间冲突，属于框架支持的规范扩展方式。

第一步：实现带前缀的自定义Storage服务 #

import { Inject, Injectable } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';

@Injectable()
export class PrefixedStorage implements Storage {
  private readonly prefix: string;

  constructor(@Inject(APP_BASE_HREF) baseHref: string) {
    // 把baseHref转换为合法的键前缀，例如/app0转换为app0_
    this.prefix = baseHref.replace(/\//g, '') + '_';
  }

  get length(): number {
    return localStorage.length;
  }

  clear(): void {
    // 仅清除当前应用前缀的存储项，不影响其他实例
    Object.keys(localStorage).forEach(key => {
      if (key.startsWith(this.prefix)) {
        localStorage.removeItem(key);
      }
    });
  }

  getItem(key: string): string | null {
    return localStorage.getItem(this.prefix + key);
  }

  key(index: number): string | null {
    return localStorage.key(index);
  }

  removeItem(key: string): void {
    localStorage.removeItem(this.prefix + key);
  }

  setItem(key: string, value: string): void {
    localStorage.setItem(this.prefix + key, value);
  }
}

第二步：注册到NGXS存储插件配置 #

import { NgxsModule } from '@ngxs/store';
import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
import { PrefixedStorage } from './prefixed-storage.service';

@NgModule({
  imports: [
    NgxsModule.forRoot([/* 你的状态类 */]),
    NgxsStoragePluginModule.forRoot({
      keys: ['*'], // 按你的需求配置要持久化的状态键
      storage: PrefixedStorage // 指定自定义存储实现
    })
  ],
  providers: [PrefixedStorage]
})
export class AppModule {}

可选调整 #

• 如果需要使用sessionStorage存储，替换上述代码中所有localStorage为sessionStorage即可
• 前缀可以根据业务需要替换为其他唯一标识，比如environment.appId，只要保证各应用实例前缀不重复即可
• 如果需要兼容旧存储数据，可以在自定义Storage类中增加降级逻辑，优先读取新前缀的key，不存在的话尝试读取旧key

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