javascript - 带有 observableArray 的 ko.JSON 抛出未捕获的 DOMException

Question

我正在尝试将一个可观察数组保存到 localStorage。为此，我使用 ko.toJSON。

var that = this;
this.items = ko.observableArray();
this.items.subscribe(function(){
    localStorage.setItem("items", ko.toJSON(that.items()));
});

所有持久化到 localStorage 的都是 false。

它抛出一个非常随机的错误:knockout-3.4.2.js:55 Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules。

知道这里发生了什么吗？

我也通过简单的 var json = ko.toJSON(that.items()); 得到错误，所以它显然来自于此。但是，简单地执行此操作时我不会收到该错误:var json = ko.toJSON([{'key': 'value'}]);。

更新:这是完整的错误消息:

Uncaught DOMException: Failed to read the 'cssRules' property from 
'CSSStyleSheet': Cannot access rules
at http://localhost:8080/js/knockout-3.4.2.js:55:405
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23

更新 2:这是问题所在的实际代码部分:

这是问题的确切上下文:

    this.savedPlaces.subscribe(function() {
    // Add all places to filteredPlaces
    that.filterPlaces();
    // Reinitialize the filter
    that.filterString("");
    // Update the markers
    that.updateMarkers();
    // Store itself in localStorage
    localStorage.setItem("savedPlaces", ko.toJSON(that.savedPlaces()));
});

当我注释掉最后一行时，我没有遇到任何问题。

如果我将它替换为:localStorage.setItem("savedPlaces", ko.toJSON([{item: "item"}]));

我试图给出一个 items 的内容示例，但显然 observableArrays 是深层(递归)对象，因此我无法在 Chrome 上为 DevTools 控制台复制粘贴。然而它看起来像:

[{'marker': a_google_maps_marker_object,
  'place': {data: mostly strings...}]

Answer 1

我发现了问题。我的可观察数组包含一个谷歌地图标记。这些是递归数组，无法进行 JSON 化。

我从数组中删除了 Google map 标记，一切正常。

虽然 Knockout 抛出了这个神秘的错误，但仍然很奇怪。