JavaScript localStorage：如何使用 JSON.stringify 从保存的数组 object 解析方法

Question

我有以下 JavaScript 代码：

function Product(){

this.ProductName="";
this.Quantity=0;
this.Price=0;
this.Category="";
this.Total=function() {
    return this.Quantity *  this.Price;
  }
this.Discount=function() {
    return this.Total() *  0.25;
  }  
}

var Product = new Product();

Product.ProductName="Tipkovnica";
Product.Quantity=100;
Product.Price=150.5;
Product.Category="IT";

if(localStorage.Products){
    Products = JSON.parse(localStorage.getItem("Products"));
}
else
{
    var Products = [];  
}
Products.push(Product);
localStorage.setItem('Products', JSON.stringify(Products));

function RetrieveObjects(Products){
    for(var a=0;a<Products.length; a++){
        document.write("<br>Product Name: "+Products[a].ProductName);
        document.write("<br>Quantity: "+Products[a].Quantity);
        document.write("<br>Price: "+Products[a].Price);
        document.write("<br>Category: "+Products[a].Category);
        document.write("<br>Total: "+Products[a].Total());
        document.write("<br>Discount: "+Products[a].Discount());
    }
}

我制作了 JSON.stringify 以将数组 object 存储在 JSON 中。 然后，当我尝试在 JSON 解析后从存储中循环返回数组中的 object 时，出现错误，因为方法Total()和Discount()未被识别为方法。

知道为什么吗？

谢谢，米兰

Answer 1

您的 function 正在使用this ， this是全局的，即window object。

但是，还有另一个问题，您不能（或者不应该）将函数存储在 JSON 中，因为没有 function 数据类型。 您应该计算值并将结果存储在 JSON 中。

var Product {

    productName: null,
    quantity: 0,
    price: 0,
    category: null,
    finalTotal: 0,
    discountedTotal: 0,
    total: function() {
        return this.quantity * this.price;
    },
    discount: function() {
        return this.total() * 0.25;
    }
}
var newProduct = Object.create(Product);

newProduct.productName = "Tipkovnica";
newProduct.quantity = 100;
newProduct.price = 150.5;
newProduct.category = "IT";
newProduct.finalTotal = newProduct.total();
newProduct.discountedTotal = newProduct.discount();


if (localStorage.Products) {
    Products = JSON.parse(localStorage.getItem("Products"));
    Products.push(newProduct);
} else {
    Products = [newProduct];
}

localStorage.setItem('Products', JSON.stringify(Products));

function RetrieveObjects(Products) {
    for (var a = 0; a < Products.length; a++) {
        document.write("<br>Product Name: " + Products[a].productName);
        document.write("<br>Quantity: " + Products[a].quantity);
        document.write("<br>Price: " + Products[a].price);
        document.write("<br>Category: " + Products[a].category);
        document.write("<br>Total: " + Products[a].finalTotal);
        document.write("<br>Discount: " + Products[a].discountedTotal);
    }
}

Answer 2

因为如果你对 object 进行字符串化，那么所有的方法都会被删除。 看看这个： https://stackblitz.com/edit/typescript-2tfnkr

不相关提示：对所有方法、属性和变量使用 camelCase 而不是 PascalCase 约定。 PascalCase 应用于 class 名称、接口等。