运用localStorage存储获取操作记录(ng-zorro)

功能描述

功能描述：表格列过长，通过用户选择隐藏部分列有利于更直观查看需要看到的表格信息。关闭浏览器，下次打开希望记忆已选项。


勾选，隐藏不必要检查项

---

一、引用控件

引用ng-zorro 控件：Tree树形控件
官方文档: link.

二、实现步骤

代码如下：

• HTML:

<nz-card>
  <nz-tabset nzLinkRouter [nzTabBarExtraContent]="extraTemplate">
  ......
    </nz-tabset>
</nz-card>

<!-- 多选框 -->
<ng-template #extraTemplate>
  <i
    nz-dropdown
    nz-icon
    nzType="ellipsis"
    nz-popover
    [nzPopoverContent]="contentTemplate"
    nzPopoverPlacement="bottomRight"
  ></i>
  <ng-template #contentTemplate>
    <nz-tree
      [nzData]="nodes"
      nzCheckable
      nzMultiple
      [nzCheckedKeys]="defaultCheckedKeys"
      [nzExpandedKeys]="defaultExpandedKeys"
      [nzSelectedKeys]="defaultSelectedKeys"
      (nzCheckBoxChange)="nzEvent($event)"
      [nzBlockNode]="true"
    ></nz-tree>
  </ng-template>
</ng-template>

• TS:

 // 设置多选框初始值 localStorage 若未储存则默认全选（isChecked: true,）
  nodes =
    JSON.parse(localStorage.getItem('form-sign')) !== null
      ? JSON.parse(localStorage.getItem('form-sign'))
      : [
          {
            title: '序号',
            key: '0-1',
            isLeaf: true,
            isChecked: true,
          },
    
        	......
          
          {
            title: 'item8',
            key: '0-9',
            isLeaf: true,
            isChecked: true,
          },
        ];

// 多选框选择时响应
  nzEvent(e: NzFormatEmitEvent): void {
    // 寻找key ->遍历旧数组，若旧数组key = 被点击多选框key -> 获取isChecked -> 更改 isChecked
    const key = e.node.key;
    const isChecked = e.node.isChecked;
    this.nodes.forEach((el, index) => {
      this.nodes.splice(index, 1, {
        title: el.title,
        key: el.key,
        isLeaf: true,
        isChecked: el.key === key ? isChecked : el.isChecked,
      });
    });
    // 储存到本地
    localStorage.setItem('form-sign', JSON.stringify(this.nodes));
  }

  getStorage(): void {
    if (localStorage.getItem('form-sign') !== null) {
      // 选中效果 -> 遍历如果为true -> get key -> 存到数组
      JSON.parse(localStorage.getItem('form-sign'))
        .filter(item => item.isChecked === true)
        .forEach(el => this.defaultCheckedKeys.push(el.key));
    } else {
      this.defaultCheckedKeys = ['0-1', '0-2', '0-3', '0-4', '0-5', '0-6', '0-7', '0-8', '0-9'];
    }
  }

总结

此为个人学习Angular过程中的练习，若有不合理的地方，欢迎指正，谢谢。