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

Question

首先是页面的样子:Image

想法:

-我正在考虑获取元素信息并将其放入 $.each 数组中，一旦它们动态添加到页面中。之后，我会将其存储到 session 存储中，并在每次加载页面时检查它是否为空，如果不是，我会将其附加到页面。

问题:

我无法让 array(assoc) 工作。我需要这样的东西:

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

用文字来说，在这种情况下我需要一个数组:['meals']，其中取决于元素数据，我将膳食数量存储为 {meal_number:} 和每个餐号都填充有该餐的信息(我从元素中获取)，在本例中为 food_name，food_state ...

代码:

$('.cd-food-meal-container').find('.cd-added-food').map(function() {
 var food_name = $(this).find('#cd-food-name').text();
 var food_state = $(this).find('.cd-food-state').text();
 var food_image = $(this).find('img').attr('src');
 var food_carbs = $(this).find('.cd-carbs').text();
 var food_prots = $(this).find('.cd-prots').text();
 var food_fats = $(this).find('.cd-fats').text();
 var food_kkals = $(this).find('.cd-kkals').text();
 var number_of_meal_from_element = $(this).closest('.cd-food-meal-container').data('meal_number');
 var array_meal_number = 'meal_' + number_of_meal_from_element;
 var meal_id = $(this).data('meal_food_id');

 meal_array['meals'] = meal_array.push({[array_meal_number]:{
  "meal_number": array_meal_number,
  "food_name": food_name,
  "food_state": food_state,
  "food_image": food_image,
  "food_carbs": food_carbs,
  "food_prots": food_prots,
  "food_fats": food_fats,
  'food_kkals': food_kkals,
  'id': meal_id
 }});

});

//我正在使用 switch 添加元素。我只是粘贴它，以防您需要其他信息，我如何将元素附加到页面。

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;

问题:

• 如何按照我想要的方式填充数组？
• 如何调用给定子数组的food_name？
• 这是存储元素并附加它们以防止它们在页面刷新时消失的正确方法吗？

Answer 1

这种方式肯定是不正确的(原因不止一个)

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

• meal_array['meals'] 看起来像一个对象 {meals: ...} (不是数组)。
• array = array.push() 这不是添加到数组的方式。仅仅 array.push() 就可以了。
• 在 meal_array.push{[array_meal_number] 中的 push 之后没有左括号。它应该是 meal_array.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,
     // ...
   }
 });