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

UPDATE2：这是问题所在的实际代码部分：

这是问题的确切背景：

    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

我发现了这个问题。我的可观察数组包含一个Google Maps标记。这些是递归数组，不能JSONified。

我从我的阵列中移除了Google地图标记，一切都很好。

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

带有observableArray的ko.JSON抛出Uncaught DOMException

1 个答案: