Packery remembering user grid layouts

Question

I am creating a dashboard using Packery and Dragabilly that allows a user to move widgets around the screen, I need to find a way where the positions the user has moved the widgets to is stored, and loads in this layout every time they come back to the site. Until they clear their cookies or use a button I am yet to create called Reset Layout that will revert the layout back to the original positioning set by me.

I tried setting up a script that stores the x and y positioning of the widgets in an array. This didn't work and resulted in an array that had x: undefined and y: undefined stored inside it. The array kept getting bigger when I dragged a widget around the screen so I scrapped that idea.

This is the code I have so far that runs packery and enables dragabilly when the Edit layout button is clicked:

// Enable and Disable Functions for Dragability
    // Initialize Packery
    var grid = new Packery('.main', {
        itemSelector: '.content',
        // Other Packery options
    });

    // Initialize Dragabilly instance for each grid item
    var draggies = [];
    $('.content').each(function (index, itemElem) {
        var draggie = new Draggabilly(itemElem, {
            // Dragabilly options
        });
        draggies.push(draggie);
        grid.bindDraggabillyEvents(draggie, itemElem);
        draggie.disable(); // Initially, disable Dragabilly
    });

    // Function to toggle Dragabilly
    function toggleDragabilly() {
        draggies.forEach(function (draggie) {
            if (draggie.isEnabled) {
                draggie.disable();
                // Change the cursor style to the default when drag is disabled
                $('.content').css('cursor', 'default');
                $('#enableDrag').css('color', ''); // Reset button text color
            } else {
                draggie.enable();
                $('.content').css('cursor', 'move');
                $('#enableDrag').css('color', '#fd7e14'); // Change button text color to #fd7e14
            }
        });
    }

    // Event handler for the "Enable/Disable Drag" button
    $('#enableDrag').on('click', function () {
        // Toggle Dragabilly
        toggleDragabilly();
    });