toString() 没有显示任何内容

Question

我正在为学校做一个项目。在项目中，我需要调用一个自制的 toString 来显示我的构造函数的所有键和值。我应该填写一张表格并将我的电脑存储在 localStorage 中。

我的逻辑函数

function Logiciels(ordiConfigure){
    //I start at one so I dont't get the first input which is text type
    for (var i = 1; i < document.forms[2].getElementsByTagName("input").length; i++) {
        if(document.forms[2].getElementsByTagName("input")[i].checked == true)
            ordiConfigure.Logiciels[i] = document.forms[2].getElementsByTagName('input')[i].value;

    ordiConfigure.Logiciels = ordiConfigure.Logiciels.filter(valeur => valeur !== null);
    return ordiConfigure.Logiciels;
}

我如何存放电脑

var ordiConfigure = new pcConfig();
    ordiConfigure.Logiciels = Logiciels(ordiConfigure);
    localStorage.setItem("ordinateur", JSON.stringify(ordiConfigure));

我的 toString()

pcConfig.prototype.toString = function() {
    var caracteristiques = "<ul>";
    for (var proprieteOrdinateur in this){
        if(typeof(this[proprieteOrdinateur]) !== "function")
            caracteristiques += "<li>" + proprieteOrdinateur + " : " + this[proprieteOrdinateur] + "</li><br/>";
    }
    caracteristiques += "</ul>";
    return caracteristiques;
};

这里是构造函数

function pcConfig(){
    this.Taille = document.forms[2].getElementsByTagName('select')[1].value;
    this.Systeme = document.forms[2].getElementsByTagName('select')[0].value;
    this.Identifiant = document.forms[2].getElementsByTagName('input')[0].value;
    //This an array for the softwares chosen
    this.Logiciels = logiciels; 
}

我是这样称呼它的

<script>
        document.getElementsByTagName('div')[0].innerHTML = JSON.parse(localStorage.getItem("ordinateur")).toString();
    </script>

picture of the page which possesses the form

它返回null，我不知道为什么？任何帮助将不胜感激。

Answer 1

您将ordiConfigure 存储为localStorage 中的JSON 字符串。问题在于，一旦将某些内容字符串化为 JSON，它就与它的来源（例如具有自定义 toString 方法的类）没有任何联系。一旦再次解析 JSON，它就只是一个由键值对组成的简单 Javascript 对象，仅此而已。

如果您希望能够在从 localStorage 检索项目后调用您的自定义 toString 方法，则您的 toString 方法需要在您将 JSON 解析回对象时可用。例如：

function ordinateurToString(ordinateur) {
  var caracteristiques = "<ul>";
  for (var proprieteOrdinateur in ordinateur){
    if(typeof(ordinateur[proprieteOrdinateur]) !== "function")
      caracteristiques += "<li>" + proprieteOrdinateur + " : " + ordinateur[proprieteOrdinateur] + "</li><br/>";
  }
  caracteristiques += "</ul>";
  return caracteristiques;
}

const ordinateur = JSON.parse(localStorage.getItem("ordinateur"));
document.querySelector('div').innerHTML = ordinateurToString(ordinateur);

另一种选择是将对象转换为 HTML 字符串之前将其存储在 localStorage 中。

（旁注：document.getElementsByTagName('div')[0] 是不必要的。最好使用选择单个元素的querySelector，而不是使用返回集合然后选择该集合中的第一个元素的方法）