Can't pass data attributes as JSON from select checkbox to localStorage

Questions
1

I got lists of products with a input checkbox. I want to check to create a list of the selected products. And show on another page as a list.

The checkbox look like this:
<input class="check-productos" type="checkbox" name="nombre" value='{"productos":{{../name}}, "supermercado":"{{name}}","valor":"{{price}}"}' data-numero='{"productos":"{{../name}}", "supermercado":{{name}},"valor":{{price}}}' data-producto="{{../name}}" data-supermercado="{{name}}" data-precio="{{price}}">

I want to save, with dataset() all data attibutes, and store on localStorage.
This code saves the value of the checkbox, but I need more data to save, not just one. So I need to store JSON in localStorage, but I can’t make it work.
I need to save on checkbox checked the data attributes as JSON object.

$$(document).on('page:init', function (e) {
        "use_strict";
        // This array will store the values of the "checked" vehicle checkboxes
        var cboxArray = []; 
              
        // Check if the vehicle value has already been added to the array and if not - add it
        function itemExistsChecker(cboxValue) {                
          var len = cboxArray.length;                
          if (len > 0) {
            for (var i = 0; i < len; i++) {
              if (cboxArray[i] == cboxValue) {
                return true;
              }
            }
          }                            
          cboxArray.push(cboxValue);
        } 
              
        $$('input[type="checkbox"]').each(function() {                    
          var cboxValue = $(this).val();  // I change this to var cboxValue = $(this).dataset(); but not work.
          var cboxChecked = localStorage.getItem(cboxValue) == 'true' ? true : false;                
          // On page load check if any of the checkboxes has previously been selected and mark it as "checked"
          if (cboxChecked) {
            $$(this).prop('checked', true);
            itemExistsChecker(cboxValue);
          }
              
          // On checkbox change add/remove the vehicle value from the array based on the choice
          $$(this).change(function() {            
            localStorage.setItem(cboxValue, $$(this).is(':checked'));
            if ($$(this).is(':checked')) {
              itemExistsChecker(cboxValue);  
            } else {
              // Delete the vehicle value from the array if its checkbox is unchecked
              var cboxValueIndex = cboxArray.indexOf(cboxValue);              
              if (cboxValueIndex >= 0) {
                cboxArray.splice( cboxValueIndex, 1 );
              }                    
            }                  
           console.log(cboxArray); 
          });                        
        });  
        console.log(cboxArray);
        Template7.data['url:lista.html'] = cboxArray;
      });