javascript - 如何在不同事件中将多个数据字符串添加到相同类型的数组到本地存储

Question

我正在开发在NodeJs，ExpressJS，Ajax和Mongo / Mongoose DB中构建的购物车应用程序。当用户单击特定项目的“添加到购物车”按钮时，我将从按钮中获取该产品的特定产品ID。然后，我向服务器发送Ajax请求，以获取有关该产品的所有信息，并将其发送回前端以存储在本地存储中。当返回有关该产品的所有信息的数据时，我需要将其设为字符串，将其添加到已添加到购物车的其他产品的数组中，并将其存储到本地存储中。问题似乎是将检索到的数据放入一个数组中，并在不同时间将多个产品存储在同一键下的本地存储中。

我在做什么是这样的：

var anotherCart = (localStorage.getItem('Product')); // getting what is already in local storage
var cart = []; // creating an empty array
cart.push(anotherCart); //adding what is already in local storage to the empty array
var addCart = responseArr[1]; //retrieving json data from the database. This is getting all of the needed product information to add to the local storage
cart.push(addCart); //adding the new product item to the cart array. There now should be what is already in the local storage and the newly added product
localStorage.setItem('Product', JSON.stringify(cart)); //stringifying and adding the cart array to local storage

将大量产品添加到购物车后，最终返回如下内容：

Array[2]
0
:
"["[\"[\\\"[null,\\\\\\\"{ _id: 583df3eead025434e61a2172,\\\\\\\\n filePath: '/public/images/df54528a827f99586135956e45f045fe.jpg',\\\\\\\\n addProductGroupName: 'Xbox One',\\\\\\\\n productName: 'Far Cry',\\\\\\\\n productPrice: 78.34,\\\\\\\\n productDescription: 'Its back again. I have never played this game but heard it is pretty good. Wanted to write an extra long description to see if someone really took the time to type such a longer sentence how exactly it would appear on things throughout the application.',\\\\\\\\n productId: 'rJUg4uiGl' }\\\\\\\"]\\\",\\\"{ _id: 583df3eead025434e61a2172,\\\\n filePath: '/public/images/df54528a827f99586135956e45f045fe.jpg',\\\\n addProductGroupName: 'Xbox One',\\\\n productName: 'Far Cry',\\\\n productPrice: 78.34,\\\\n productDescription: 'Its back again. I have never played this game but heard it is pretty good. Wanted to write an extra long description to see if someone really took the time to type such a longer sentence how exactly it would appear on things throughout the application.',\\\\n productId: 'rJUg4uiGl' }\\\"]\",\"{ _id: 583df420ad025434e61a2173,\\n filePath: '/public/images/e6f5cab3de92a9365807cb8301f781b7.jpg',\\n addProductGroupName: 'Xbox One',\\n productName: 'Star Wars BattleFront',\\n productPrice: 3000,\\n productDescription: 'This games is like, a game, for star wars',\\n productId: 'BJ_7VOiGg' }\"]","{ _id: 583df3eead025434e61a2172,\n filePath: '/public/images/df54528a827f99586135956e45f045fe.jpg',\n addProductGroupName: 'Xbox One',\n productName: 'Far Cry',\n productPrice: 78.34,\n productDescription: 'Its back again. I have never played this game but heard it is pretty good. Wanted to write an extra long description to see if someone really took the time to type such a longer sentence how exactly it would appear on things throughout the application.',\n productId: 'rJUg4uiGl' }"]"
1
:
"{ _id: 583df420ad025434e61a2173,↵ filePath: '/public/images/e6f5cab3de92a9365807cb8301f781b7.jpg',↵ addProductGroupName: 'Xbox One',↵ productName: 'Star Wars BattleFront',↵ productPrice: 3000,↵ productDescription: 'This games is like, a game, for star wars',↵ productId: 'BJ_7VOiGg' }"
length
:
2
__proto__
:
Array[0]

因此，这里发生了两个大问题。首先，将产品添加到阵列中时，所有产品都将添加到阵列中的第一个对象中。其次，数组中返回的第一件事为空，这是因为第一次访问本地存储中没有任何内容。

因此，任何人都可以在如何将这些项目成功添加到阵列并将其存储到本地存储方面提供帮助吗？我的许多尝试都是失败。而且，任何人都可以提供更好的解决方案来解决将多个产品分别存储在本地存储中，然后在添加产品后的短时间内对其进行访问的总体思路。

任何帮助表示赞赏。谢谢。

Answer 1

首先，Product是一个对象（大概是字符串化的），对吗？

我认为您只是在混合订单。在完成需要做的事情之前，通常不希望使数据成为字符串：

即


    var products = localStorage.getItem（“ products”）|| “ []”; //这应该是一个数组
    产品= JSON.parse（产品）;
    var product = {id：1，filePath：“ path”，etc：“ yaddayadda”}; //来自api
    products.push（product）;
    localStorage.setItem（“ products”，JSON.stringify（products））;



希望这会有所帮助（请注意，“ []”是字符串-JSON.parse(value)期望value是字符串）