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

它 returns 为空，我不知道为什么？任何帮助将不胜感激。

Answer 1

您将 ordiConfigure 作为 JSON 字符串存储在 localStorage 中。问题是，一旦某些东西被字符串化为 JSON，它就与它的来源没有任何联系（例如来自 class 和自定义 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，其中 select 是单个元素，而不是使用 returns 集合和然后 select 该集合中的第一个元素）

toString() 没有显示任何内容

toString() not showing anything

javascript

json

object

tostring

local-storage