查了半天的BUG，竟然是localStorage key值写错，该怎么避免？

需要直接填写字符串的地方，是拼写错误的高发区。
如题中本地存储key值，或是 el-form-item 的prop属性，又或多语言t()函数的key值。

对于本地存储，内部json的key值更容易写错，如 user，{username:'张三'}在另一个地方却存了{name:'张三'}

那么，如何避免本地存储key值写错呢？

方法一  定义Enum

enum StorageKey {
    Token = 'token',
    User='user'
  }
  
  localStorage.getItem(StorageKey.Token)

方法二  定义key值object

const StorageKey = {
    Token: 'token',
    User: 'user'
}
localStorage.getItem(StorageKey.Token)

方法三  使用单个key存储整体

const createStorage2 = <T>() => {
    const key='app'
    return {
        get(): Partial<T> {
            const app = localStorage.getItem(key)
            return app === null ? {} : JSON.parse(app)
        },
        set(data: Partial<T>) {
            localStorage.setItem(key, JSON.stringify(data))
        }
    }
}

const storage2=createStorage2<{token:string,user:{username:string}}>()
//获取
storage2.get().token
//设置
const data=storage2.get()
storage2.set({...data,user:{username:'张三'}})

方法四  使用 soon-storage 1.0 库

定义

import createStorage from 'soon-storage'
type StoreData={
  name: string;
  age: number;
  birth: Date;
  graduated: boolean;
  school: {
    name: string;
    address: string;
  };
}
const storage = createStorage<StoreData>({
  // 存储时 key 的前缀
  prefix: "soon-",
  // 可以选择 localStorage 或 SessionStorage
  provider: () => localStorage,
  // string,number,boolean,json  是内置的转换器
  // 可以定义自己的转换器，如下方的 Date类型的 birth
  transforms: {
    name: "string",
    age: "number",
    birth: {
      getter: (val) => (val === null ? null : new Date(val)),
      setter: (val) => val.toUTCString(),
    },
    graduated: "boolean",
    school: "json",
  },
});

操作单个key

// 写入
storage.birth.set(new Date("2008-08-08"));
// 读取
storage.birth.get();
// 移除
storage.birth.remove();

操作整体

// 整体写入
store.$.setAll({
  name: "张三",
  age: 100,
  birth: new Date(),
  graduated: false,
  school: {
    name: "Green Land",
    address: "Qingdao",
  },
});

// 整体读取
// 注意 单个key的值可能会是null，因为不能确定用户会不会手动消除该记录
storage.$.getAll();

// 整体清除
// 只会清除该实例定义的key值，而localStroage.clear() 会把所有都清空
storage.$.removeAll();

总结

• enum、和直接定义key值object的方法均仅能避免外部key值写错的情形。
• 使用单个key存储整体的方法，写入操作较繁琐，需先读取。如果存储的内容多，可能会有性能问题，因为读取或写入了当前逻辑所不需要的内容。

本文的目的当然是推荐使用 soon-storage ，期待大家多多支持给个⭐
github: github.com/leafio/soon…

完整案例
github: soon-admin-vue3
github: soon-admin-react-nextjs