Как разместить элемент div в том же месте, а также получить значения .data (), даже когда я перезагружаю страницу

Question

Я пытаюсь добавить тег div в div, также div можно изменять и перетаскивать.Они также хранят некоторые вейлы, используя .data ().Демонстрация показана ниже

Мне нужно поместить div внутри этого родительского div в том же месте и получить значения, которые я сохранил для каждого div, даже после перезагрузкикод страницы

, используемый для добавления div в этот большой родительский div

            width: wbox.val() * zoom,
            height: lbox.val() * zoom,
            padding: '0.5em',
            'font-size': '1em',
            border: '2px solid',
            'user-select': 'none',
            'background-color': 'gray',
            cursor: 'pointer',
            position: 'absolute',
            // 'font-size': '',
            block: 'inline'
        });
        $element.attr('id', component.val());
        $('#convas').append($element);
        $element.data('w', wbox.val());
        $element.data('l', lbox.val());

        $element.draggable({
            containment: '#convas',
        });