I have configurable product.
I want append URL once I click on configurable option with query string on the product detail page. Like,
.html?size=XL&color=red
And also once it append in the URL and If we try to Reload page then  selected parameter will be selected after page load.

Here what I did. I am not sure is this proper flow for this requirement Or not.

    _OnClick: function ($this, $widget, eventName) {
            var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
                $wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
                $label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
                attributeId = $parent.attr('attribute-id'),
                $input = $parent.find('.' + $widget.options.classes.attributeInput);

            var color = $label.html();
            var size = $this.html();
            
            window.location.hash = '?size='+size+'&color='+color;