How to store selected value of drop down list on local storage ?

Question

I work or razor page asp.net core 7 . i face issue i can't store value of selected value option on local storage 

so please How to do that ?

<form id="FrmShelfLabelPrintrSetup" method="post">

            <div class="row">
                <div class="col-lg-12 col-12 row">
                    <div class="col-md-3 col-lg-2">
                        <label for="branch-selectlbl" style="margin-left:3px;font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">Print Server</label>
                  
                        <select id="branch-select" asp-for="SelectedBranchId" name="selectbranchid" class="form-select" style="margin-left:3px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" onchange="toggleButtonVisibility()">
                            <option value="0">--Select--</option>
                            @foreach (var branches in Model.branches)
                            {

                                <option value="@branches.iBranchCode">@branches.vBranchDesc</option>


                            }
                        </select>
                       
                    </div>
             
                    <div class="col-md-3 col-lg-2">
                        <br>
                        <button  id="Searchtxt" type="submit" name="searchButton" value="search" asp-page-handler="Search" style="width:100px;margin-top:7px;" class="btn btn-primary">Search</button>
                        <button id="createTxt" data-toggle="modal" data-target="#CreateshelflabelModal" style="width:100px;margin-top:7px;margin-left:7px;display:none;" class="btn btn-primary">Create</button>

                    </div>

                    
                </div>
            </div>







        </form>

on page model what i do 

public class ShelfLabelPrinterSetUpModel : PageModel
    {

 public async Task OnPostSearchAsync(string selectbranchid)
        {
// how to store value of local storage here
        }

}

Answer 1

Only JavaScript can access local storage. Add an event handler to the select and set local storage.

document
    .getElemenyById(“branch-select”)
    .addEventListener("change", (e) => {
        localStorage.setItem("myvalue", e.target.value);
    });