Using cookies to remember drop selection choices

[heatherwebdev]

I have 3 drop downs that users can select to find products, using product brand, and device type. when they select the product brand, the products in that category load in the model # selection box, if they choose a device type, it will narrow down the model # options even more. I want to add a cookie to remember the users brand and device type options for leaving and returning to the page. This is the code for the dropdowns

 <div class="col-md-12 col-sm-12 col-xs-12">
            <mvt:item name="toolkit" param="catinfo|catvar|'Device-Brand'" />
            <mvt:item name="toolkit" param="vassign|Category_Code|g.catvar:id" />
            <mvt:item name="toolkit" param="subcat|ccount|g.catvar:code" />
            <mvt:if expr="ccount GT 0">
            <form class="form-horizontal row clearfix" role="form" title="Device Brand">
                <div class="form-group form-group-lg">
                    <div class="col-md-1 col-sm-1 col-xs-2">
                        <label class="control-label" for="quick_brands">1</label>
                    </div>
                    <div class="col-md-11 col-sm-11 col-xs-10">
                        <select name="brands" id="quick_brands" class="form-control quick">
                            <option value="device_brand">Device Brand</option>
                            <mvt:item name="toolkit" param="asortmulti|l.all_settings:sub_categories|:code|1" />
                            <mvt:foreach iterator="sub_category" array="sub_categories">
                                <option value="&mvt:sub_category:code;">&mvt:sub_category:name;</option>
                            </mvt:foreach>
                        </select>
                    </div>
                </div>
            </form>
            </mvt:if>
            <mvt:item name="toolkit" param="catinfo|catvar|'Device-Type'" />
            <mvt:item name="toolkit" param="vassign|Category_Code|g.catvar:id" />
            <mvt:item name="toolkit" param="subcat|ccount|g.catvar:code" />
            <mvt:if expr="ccount GT 0">
            <form class="form-horizontal row clearfix" role="form" title="Device Type">
                <div class="form-group form-group-lg">
                    <div class="col-md-1 col-sm-1 col-xs-2">
                        <label class="control-label" for="quick_models">2</label>
                    </div>
                    <div class="col-md-11 col-sm-11 col-xs-10">
                        <select name="model" id="quick_models" class="form-control quick">
                            <option value="device_type">Device Type</option>
                            <mvt:item name="toolkit" param="asortmulti|l.all_settings:sub_categories|:code|1" />
                            <mvt:foreach iterator="sub_category" array="sub_categories">
                            <option value="&mvt:sub_category:code;">&mvt:sub_category:name;</option>
                            </mvt:foreach>
                        </select>
                    </div>
                </div>
            </form>
            </mvt:if>
            <div id="type-wrapper">
                <form class="form-horizontal row clearfix" role="form" title="Model">
                    <div class="form-group form-group-lg">
                        <div class="col-md-1 col-sm-1 col-xs-2">
                            <label class="control-label" for="type">3</label>
                        </div>
                        <div class="col-md-11 col-sm-11 col-xs-10">
                            <select name="brands" id="type" class="form-control">
                                <option value="device_brand" disabled>Model #</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>