使用ko.toJSON序列化observableArray时抛出DOMException问题咨询

这个问题其实是两个关联的问题：ko.toJSON触发cssRules访问异常，以及最终只存储了false。我来拆解一下：

为什么会触发cssRules的DOMException？ #

这个错误本质是浏览器同源策略的限制：当你的代码尝试访问跨域加载的CSS样式表的cssRules属性时，浏览器会直接抛出这个异常。那为什么ko.toJSON会触发这个？

因为Knockout的ko.toJSON（底层依赖ko.toJS）会递归遍历对象的所有属性进行序列化。如果你的observableArray里的对象直接或间接引用了DOM元素（比如某个item里存了绑定的DOM节点、或者包含了带有styleSheet引用的元素），序列化时就会遍历到DOM元素的styleSheets属性，一旦其中有跨域加载的样式表，浏览器就会阻止访问并抛出错误。

为什么只存储了false？ #

这是序列化失败的连锁反应：当ko.toJSON在遍历过程中抛出异常，后续的序列化流程会中断，可能你的代码在错误处理中默认存储了false，或者ko.toJSON在异常情况下返回了错误值，最终导致localStorage里只存了false。

解决步骤 #

1. 分离数据与UI引用
   确保你的observableArray里只存储纯数据对象，不要包含任何DOM元素、jQuery对象或者其他UI相关的引用。比如如果之前的item对象里有domElement这类属性，直接删除它，只保留用来渲染UI的原始数据（比如ID、文本内容、状态标记等）。

2. 自定义序列化逻辑（过滤不必要的属性）
   如果无法避免对象里混有UI相关属性，可以先转成普通JS对象，再过滤掉不需要的内容，最后手动序列化：

   // 先转成普通JavaScript对象（解除Knockout的observable包装）
   const plainItems = ko.toJS(that.items());
   // 过滤掉包含DOM引用的属性（根据你的实际结构调整）
   const cleanItems = plainItems.map(item => {
       // 解构赋值，移除不需要的属性
       const { uiRef, ...cleanItem } = item;
       return cleanItem;
   });
   // 手动序列化并存储
   localStorage.setItem('persistedItems', JSON.stringify(cleanItems));
   

3. 验证跨域CSS的CORS配置（可选）
   如果页面中确实有跨域加载的CSS，可以检查该资源是否配置了正确的CORS响应头（比如Access-Control-Allow-Origin）。不过这只是辅助手段，核心还是避免序列化DOM元素。

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