Javascript 如何在刷新时保存页面元素

首先，页面的外观如下所示：

这个想法： -我想获取元素信息并将其放入带有

$的数组中。每个
元素都会被动态添加到页面中。之后，我会将它存储到会话存储中，并在每次加载页面时检查它是否为空，如果不是，我会将它附加到页面中

问题是：
我无法使阵列（assoc）工作。我需要这样的东西：

array['meals'] = {meal_number:{'food_name':food_name,'food_state':food_state.. and so on}};

对于单词，在这种情况下我需要一个数组：
['founds']
，在这个数组中，根据元素数据，我将餐号存储为
{found\u number:}
，每个餐号都填充有信息，对于餐（我从元素中获取），在这种情况下，食物名称、食物状态

守则：
//我用开关添加元素。我只是粘贴它，以防你们需要额外的信息，我如何附加元素的页面。

开关（餐号）{
案例1：
如果（$（'.cd食物餐容器[data-meat_number=“1”]'）。数据（'meat_number'）==食物餐号）{
$（'.cd食品容器[data-fine_number=“1”]'）。追加（食品结果）；
}否则{
$（'.cd foods'）。附加（foods_容器）；
$（'.cd食品容器[data-fine_number=“1”]'）。追加（食品结果）；
}
//Добавяме калкулацията на макронутриенти за всяко меню
$（'.cd食物餐容器[data-fine_number=“1”]”）。查找（'.cd carbs'）。每个（函数（）{
sum_carbs+=parseFloat（$（this.text（））；
});
$（'.cd食物餐容器[data-fine_number=“1”]”）。查找（'.cd prots'）。每个（函数（）{
sum_prots+=parseFloat（$（this.text（））；
});
$（'.cd食物餐容器[data-fine_number=“1”]”）。查找（'.cd fats'）。每个（函数（）{
sum_fats+=parseFloat（$（this.text（））；
});
$（'.cd食物餐容器[data-meat_number=“1”]”）。查找（'.cd kkals'）。每个（函数（）{
sum_kkals+=parseFloat（$（this.text（））；
});
$（'.cd食物餐容器[data-fine_number=“1”]”）。儿童（'.total_fine_value'）。删除（）；
$（'.cd食品容器[data-Fine_number=“1“]）。追加（“Маааааааааааааааааааааааааааа107；
打破

问题：

如何以我想要的方式填充数组
如何为给定的子数组调用
食物名称
这是存储元素并附加元素的正确方法吗？这样可以避免在页面刷新时丢失元素吗
这种方式绝对不正确（原因不止一个）


fine_数组['fines']
看起来像一个对象
{fines:…}
（不是数组）
array=array.push（）

在
用餐数组中的
push
后面没有左括号。push{[array\u-mean\u number]
。它应该是
用餐数组。push（
）

PS：要添加到对象，您可能需要执行以下操作：

 Object.assign(meal_array['meals'], {
   [array_meal_number]:{
     "meal_number": array_meal_number,
     "food_name": food_name,
     "food_state": food_state,
     "food_image": food_image,
     "food_carbs": food_carbs,
     // ...
   }
 });

我认为你不想要数组，而是一个对象。如果你想使用编号索引，就使用数组。如果你想使用名称作为键/索引，就使用对象。因此，不要使用
push
。关于正确的存储方式：将其存储在客户端感觉很奇怪，你不想用“购物车”实现会话吗在服务器端？如果你真的想在客户端保存它，为什么不使用本地/会话存储呢！如果我将它存储为一个对象，控制台只返回最后一条记录，而它不执行任务。是的，我会像我在Idea中写的那样将它存储为会话存储。如果我使用对象，会有什么结果。我需要结果对于每种元素，不只是每餐一种；（很抱歉推送，我正在编辑代码段，但忘记添加括号。我尝试使用object，但问题是它只返回一个结果，而不是页面上的所有内容。我尝试了您的方法，它给我错误的object。assing不是一个函数。它是
对象。assign
，而不是
对象。assing
很好地修复了它，并且是变量。）s、 仍在尝试此操作，它正在工作，但返回相同的元素乘以元素的信息。。。
switch (meal_number) {
             case 1:
              if ($('.cd-food-meal-container[data-meal_number="1"]').data('meal_number') == meal_number) {


               $('.cd-food-meal-container[data-meal_number="1"]').append(food_result);


              } else {
               $('.cd-foods').append(foods_container);
               $('.cd-food-meal-container[data-meal_number="1"]').append(food_result);
              }

              //Добавяме калкулацията на макронутриенти за всяко меню
              $('.cd-food-meal-container[data-meal_number="1"]').find('.cd-carbs').each(function() {
               sum_carbs += parseFloat($(this).text());
              });


              $('.cd-food-meal-container[data-meal_number="1"]').find('.cd-prots').each(function() {
               sum_prots += parseFloat($(this).text());
              });


              $('.cd-food-meal-container[data-meal_number="1"]').find('.cd-fats').each(function() {
               sum_fats += parseFloat($(this).text());
              });
              $('.cd-food-meal-container[data-meal_number="1"]').find('.cd-kkals').each(function() {
               sum_kkals += parseFloat($(this).text());
              });



              $('.cd-food-meal-container[data-meal_number="1"]').children('.total_meal_values').remove();
              $('.cd-food-meal-container[data-meal_number="1"]').append("<div class = 'total_meal_values'><div><b>Макронутриенти</b></div><table class = 'cd-sm-table'><tr><th>Въглехидрат</th><th>Протеин</th><th>Мазнини</th><th>Калории</th></tr><hr><tr><td class = 'cd-sm-carb-total'>" + sum_carbs + "</td><td class= 'cd-sm-prot-total'>" + sum_prots + "</td><td class= 'cd-sm-fats-total'>" + sum_fats + "</td><td class = 'cd-sm-cals-total'>" + sum_kkals + "</td></tr></table></div>");



              break;

meal_array['meals'] = meal_array.push{[array_meal_number]:{
  "meal_number": array_meal_number,
  "food_name": food_name,
  "food_state": food_state,
  // ...
}};

 Object.assign(meal_array['meals'], {
   [array_meal_number]:{
     "meal_number": array_meal_number,
     "food_name": food_name,
     "food_state": food_state,
     "food_image": food_image,
     "food_carbs": food_carbs,
     // ...
   }
 });