监听数组变动并触发额外任务：使用Proxy实现数据持久化

class Environment {
  constructor() {
    // 从sessionStorage中初始化数组，如果sessionStorage中没有数据，则初始化为空数组
    const crumbList =
      JSON.parse(sessionStorage.getItem('crumbs') ?? null) ?? [];

    this.crumbs = new Proxy(crumbList, {
      set(obj, prop, value) {
        // debugger;
        // console.log({ obj, prop, value });

        // 执行默认的set操作
        const result = Reflect.set(...arguments);

        // 如果被赋值的属性是length，则将数组的内容持久化到sessionStorage中
        if (prop === 'length') {
          // 将最新的数组内容保存到sessionStorage中
          sessionStorage.setItem('crumbs', JSON.stringify(crumbList));
        }
        return result;
      }
    });
    //  为 `this.crumbs` 代理添加一个自定义 `valueOf` 实现，该实现返回代理对象最新镜像状态的浅拷贝。
    Object.defineProperty(this.crumbs, 'valueOf', {
      value: function valueOf () {
        return [...crumbList];
      },
    });
  }
}

const env = new Environment();

const metricId = 6;
const concept = 'Back orders';

const crumb = { metricId, concept };

env.crumbs.push(crumb);

env.crumbs.push('foo');
env.crumbs.push('bar');

env.crumbs.length = 5;

env.crumbs.push('baz');
env.crumbs.push('biz');

env.crumbs.length = 9;

console.log('... after initial `push` operations and `crumbs.length` changes ...');
console.log({ "current value": env.crumbs });

env.crumbs.shift();
env.crumbs.pop();
env.crumbs.pop();

console.log('... after `shift` and `pop` operations ...');
console.log({ "current value": env.crumbs });

env.crumbs.splice(1, 3);

console.log('... after a final `splice` operation ...');
console.log({ "current valueOf()": env.crumbs.valueOf() });

console.log({ "currently stored JSON": sessionStorage.getItem('crumbs') });