Angular中localStorage存储已读文章数组控制台输出null问题

问题场景 #

实现3篇文章的已读标记逻辑，预期规则：

• 用户打开文章时，将对应文章名称存入localStorage
• 用户再次访问页面时，校验文章名称是否存在于localStorage存储的数组中，存在则自动勾选对应已读复选框
  运行问题代码时控制台输出null，原有实现代码如下：

public arraySuccess = [];

  ngOnInit(): void {
    this.arraySuccess = JSON.parse(localStorage.getItem('success'));
  }
  openDialog(String) {
    this.dialog.open(RecommendationsDialog);

    if(this.arraySuccess != null && 
       this.arraySuccess.includes(String)) {
      return
    } else if (this.arraySuccess != null) {
      this.arraySuccess.push(String);
    }

    localStorage.setItem('success', JSON.stringify(this.arraySuccess));
    console.log(this.arraySuccess);

  }

核心错误点 #

• 初始化逻辑漏洞：首次访问页面时localStorage中不存在success键，localStorage.getItem('success')返回null，JSON.parse(null)结果仍为null，直接把初始定义的空数组arraySuccess覆盖为null
• 存储逻辑漏洞：当arraySuccess为null（即首次访问场景），两个判断分支都要求arraySuccess != null才会执行，导致第一次打开文章时不会执行push操作，最后执行JSON.stringify(this.arraySuccess)存入localStorage的还是null，后续每次加载读取到的永远是null，形成死循环
• 命名不规范：方法入参直接使用String作为参数名，和JavaScript内置字符串构造函数重名，存在隐性bug风险

修复后代码 #

// 明确数组类型为字符串数组
public arraySuccess: string[] = [];

ngOnInit(): void {
  // 读取localStorage时增加兜底逻辑，无对应存储值时默认赋值为空数组，从根源避免null值
  this.arraySuccess = JSON.parse(localStorage.getItem('success') || '[]');
}

// 入参改为语义化命名，避免和内置构造函数冲突
openDialog(articleName: string) {
  this.dialog.open(RecommendationsDialog);

  // 因为arraySuccess初始化时已经兜底为数组，不需要额外判空
  // 已存在于已读列表直接返回，不重复存储
  if (this.arraySuccess.includes(articleName)) {
    return;
  }

  // 不存在则加入已读列表，同步存入localStorage
  this.arraySuccess.push(articleName);
  localStorage.setItem('success', JSON.stringify(this.arraySuccess));
  console.log(this.arraySuccess);
}

复选框绑定提示 #

模板中已读复选框直接绑定判断逻辑即可实现自动勾选：

<!-- 单篇文章复选框示例，article为当前循环的文章对象 -->
<input type="checkbox" [checked]="arraySuccess.includes(article.name)" disabled>

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