Storing as array in localstorage using jQuery

Question

I have to store product details in localStorage, I am using two arrays but every time it will create new in local storage and storing previous data, I think I did not set my jQuery.each loop perfectly.

It will store data in one array, but after refresh its creating new array. Here is the screenshot of page: https://drive.google.com/file/d/1cN7_hjNu23QU3pzCOScvLvS_VijSzgM5/view?usp=sharing

Here is the screenshot after page refresh: https://drive.google.com/file/d/1w1fHKHaDWTc_iYH964f_yFshORCv4Dfp/view?usp=sharing

Here is my script:

var productData = [];

var productData2 = [];
var productData = JSON.parse(localStorage.getItem("products"));

require(['jquery'],function(){
    jQuery(document).ready(function() {
         var data = '';
         jQuery("#addbutton").click(function(){
            var sku = jQuery('#get_product').val();
            var getQuantity = jQuery("input[name='qty']").val();
             jQuery('.configurable').each(function () {
                 sku+='-'+jQuery(this).val()
             });
            var i = 0;
            jQuery('#qty').each(function () {
                if(jQuery(this).val()) {
                    productData2.push({'qty': jQuery(this).val(),  'name': data.pr.name, 'sku': sku});
                    i++;
                }
            });

            if(productData == null){
                localStorage.setItem("products", JSON.stringify(productData2));
            }else{
                productData.push(productData2);
                localStorage.setItem("products", JSON.stringify(productData));
            }
            var store = JSON.parse(localStorage.getItem("products"));
            console.log(store);
            jQuery("#tabledata").append('<tr><td>' + data.pr.name + '</td><td>' + sku + '</td><td>' + getQuantity + '</td></tr>'); //<td>' + abc + '</td><td>' + getQuantity + '</td>
        });
    });
});

productData.push(productData2); this makes it create new array. Check your if condition — Vikram Singh
– Vikram Singh, Commented Nov 21, 2019 at 5:22
@VikramSingh sorry I updated my question, productData I am using for fetch previous data — Sagar Parikh
– Sagar Parikh, Commented Nov 21, 2019 at 5:30
Please tell what output json structure you want in your localstorage second time. — Vikram Singh
– Vikram Singh, Commented Nov 21, 2019 at 5:31

Vikram Singh · Accepted Answer · 2019-11-21 05:34:35Z

1

I think you want this.

var productData = [];

var productData2 = [];
var productData = JSON.parse(localStorage.getItem("products"));

require(['jquery'],function(){
    jQuery(document).ready(function() {
         var data = '';
         jQuery("#addbutton").click(function(){
            var sku = jQuery('#get_product').val();
            var getQuantity = jQuery("input[name='qty']").val();
             jQuery('.configurable').each(function () {
                 sku+='-'+jQuery(this).val()
             });
            var i = 0;
            jQuery('#qty').each(function () {
                if(jQuery(this).val()) {
                    productData2.push({'qty': jQuery(this).val(),  'name': data.pr.name, 'sku': sku});
                    i++;
                }
            });

            if(productData == null){
                localStorage.setItem("products", JSON.stringify(productData2));
            }else{
                productData = productData.concat(productData2);
                localStorage.setItem("products", JSON.stringify(productData));
            }
            var store = JSON.parse(localStorage.getItem("products"));
            console.log(store);
            jQuery("#tabledata").append('<tr><td>' + data.pr.name + '</td><td>' + sku + '</td><td>' + getQuantity + '</td></tr>'); //<td>' + abc + '</td><td>' + getQuantity + '</td>
        });
    });
});

You are pushing array into array. To append one array at the end of another please use concat method.

answered Nov 21, 2019 at 5:34

Vikram Singh

9821 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vikram Singh Over a year ago

Does it answer your question?

Sagar Parikh Over a year ago

No, after using concat its not adding any new data into array

Vikram Singh Over a year ago

productData = productData.concat(productData2); have you added this line as it is?

Sagar Parikh Over a year ago

Thanks, data is now added in same array, but its adding previous data into that array, means it I click 1 time add, it will add 3 data 2 previous and 1 new data, after that 4,5... link:drive.google.com/file/d/16zsqhCalXeANGglj-W39oYuOOEre58L_/…

Vikram Singh Over a year ago

That's what you want right? if it solve your problem mark this question as answered.

|

Collectives™ on Stack Overflow

Storing as array in localstorage using jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related