IE11中LocalStorage存储Date变量异常问题求助

嘿，这个IE11的兼容性坑我之前踩过！问题出在IE11对日期字符串的解析规则和现代浏览器不一致，尤其是SharePoint返回的日期格式，很容易让IE11的new Date()构造函数返回无效的Date对象（表现为undefined或者Invalid Date）。咱们来一步步解决它：

问题根源 #

IE11的Date构造函数对ISO 8601格式的日期字符串支持不全，比如像2023-12-01T14:30:00Z这种带T和Z的格式，或者SharePoint有时返回的/Date(1699999999999)/这种JSON序列化日期格式，IE11都无法正确解析，最终导致new Date(elem.EventDate)返回undefined或者无效的Date对象。

解决方案 #

方案1：统一日期格式处理函数 #

写一个兼容IE11的日期解析函数，覆盖常见的SharePoint日期格式：

/**
 * 兼容IE11的日期解析函数
 * @param dateStr 原始日期字符串
 * @returns 有效的Date实例，解析失败则返回当前日期兜底
 */
function parseIE11CompatibleDate(dateStr: string): Date {
  if (!dateStr) return new Date();

  // 处理SharePoint特有的/Date(xxx)/格式
  const timestampMatch = dateStr.match(/\/Date\((\d+)\)\//);
  if (timestampMatch) {
    const timestamp = parseInt(timestampMatch[1], 10);
    return new Date(timestamp);
  }

  // 处理ISO格式，替换T为空格、去掉Z来适配IE11
  const formattedDateStr = dateStr.replace('T', ' ').replace('Z', '');
  const date = new Date(formattedDateStr);

  // 验证解析结果，失败则返回当前日期兜底
  return isNaN(date.getTime()) ? new Date() : date;
}

然后在你的代码里替换原来的Date实例化逻辑：

public getEvents(): Promise<IEventItem[]> { 
  return new Promise<IEventItem[]>(( resolve) => { 
    sp.web.getList(window.location.pathname + '/Lists/Events').renderListDataAsStream(this.getParams()).then((streamitems) => { 
      const _items: IEventItem[] = []; 
      streamitems.Row.map((elem) => { 
        _items.push({ 
          Title: elem.Title, 
          Date: parseIE11CompatibleDate(elem.EventDate), 
          EndDate: parseIE11CompatibleDate(elem.EndDate), 
          Category: elem.Category, 
          Location: elem.Location, 
          ID: elem.ID, 
          IsCached: false, 
        }); 
        window.localStorage.setItem(this.cacheKey, JSON.stringify(_items)); 
      }); 
      resolve(_items); 
    }); 
  }); 
}

方案2：用Date.parse先转时间戳 #

如果你的日期字符串是IE11能通过Date.parse解析的格式，可以直接先转成时间戳再实例化，这种方式更简洁：

// 替换原来的Date实例化代码
Date: (() => {
  const timestamp = Date.parse(elem.EventDate);
  return isNaN(timestamp) ? new Date() : new Date(timestamp);
})(),
EndDate: (() => {
  const timestamp = Date.parse(elem.EndDate);
  return isNaN(timestamp) ? new Date() : new Date(timestamp);
})(),

建议先在IE11开发者工具里用console.log(Date.parse(elem.EventDate))测试是否能返回有效时间戳，再决定是否用这个方案。

额外调试建议 #

1. 在IE11开发者工具里打印elem.EventDate的实际值，确认它的格式，这样可以针对性调整解析逻辑。
2. 验证生成的Date实例是否有效：可以用dateInstance.getTime()检查，如果返回NaN说明解析失败，需要调整格式处理逻辑。

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