我试图将一个可观察的数组保存到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...}]
答案 0 :(得分:0)
我发现了这个问题。 我的可观察数组包含一个Google Maps标记。这些是递归数组,不能JSONified。
我从我的阵列中移除了Google地图标记,一切都很好。
虽然Knockout引发了这个神秘的错误,但仍然很奇怪。