Annotate a field in a typescript class to store its' content in localstorage transparently.

preference-in-localstorage.ts

//
// Inspired by https://github.com/zhaosiyang/property-watch-decorator/blob/master/src/index.ts
//
// Annotate a field in a typescript class to store its' content in localstorage transparently.
//
export function Preference<T = any>(preferenceKey: string, defaultValueObj: T) {
  return (target: any, key: PropertyKey) => {
    Object.defineProperty(target, key, {
      set: function(value) {
        localStorage.setItem(preferenceKey, JSON.stringify(value));
      },
      get: function() {
        const rawValue = window.localStorage.getItem(preferenceKey);
        const value = rawValue !== null && rawValue !== undefined ? <T>JSON.parse(rawValue) : defaultValueObj;
        return value;
      },
    });
  };
}