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

Question

I have the following JavaScript code:

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());
    }
}

I made JSON.stringify to store array object in JSON. Then, When I tried to loop object from array back from storage after JSON parse, I got error because methods Total() and Discount() were not recognized as methods.

Any idea why?

Thanks, Milan

Answer 1

Your function is using this but that is the global this which is the window object.

However, there is another problem, you cannot (or rather should not) store functions in JSON as there is no function data type. You should calculate the values and store the result in your 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

Because if you stringify the object, then all the methods are removed. Take a look at this: https://stackblitz.com/edit/typescript-2tfnkr

Not related hint: use the camelCase instead of PascalCase convention for all of the methods, properties and variables. PascalCase should be used in class names, interfaces etc.