javascript - 如何避免页面刷新后丢失数据

Question

我的表单中有三个下拉菜单，即使我刷新或在其他页面中导航并返回，我也希望不会丢失用户选择的数据。

这是我的 View ，其中有 3 个下拉菜单:

 @using (Ajax.BeginForm("SearchForCars", "Home", null, new AjaxOptions { UpdateTargetId = "DivCategoriesTree", OnSuccess = "success", HttpMethod = "Post" }, new { make = "makes" }))
 {
           <div>
                    <div class="col-sm-4" style="height: 10em;display: flex;align-items: center ; padding-top:25px;">
                        <i class="fa fa-car" style="font-size:60px;color:red; padding-left:20px;"></i>
                        <strong style="padding-left:20px;"></strong>
                    </div>

                    <div class="col-sm-4">
                        <div style="padding-top:15px;">
                            <form class="form-control-static">
                                <div class="form-group">
                                    @*<div class="panel panel-default" id="Productresult">*@
                                    @*<div class="panel-body">*@
                                    <div class="row">
                                        <div class="col-sm-10">
                                            @if (ViewData.ContainsKey("makes"))
                                            {
                                                @Html.DropDownList("makes", ViewData["makes"] as List<SelectListItem>, "--Select make--", new { @class = "dropdown-toggle form-control" })
                                            }
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <p></p>
                                            @Html.DropDownList("models", new SelectList(string.Empty, "Value", "Text"), "--Select model--", new { @class = "dropdown-toggle form-control" })
                                        </div>
                                    </div>
                                    <div class="row">
                                        <p></p>
                                        <div class="col-sm-10">
                                            @Html.DropDownList("engines", new SelectList(string.Empty, "Value", "Text"), "--Select engine--", new { @class = "dropdown-toggle form-control" })
                                        </div>
                                    </div>
                                    @*</div>*@
                                    @*</div>*@
                                </div>

                            </form>

                        </div>
                    </div>

                    <div class="col-sm-4" style="height: 10em;display: flex;align-items: center ; padding-top:25px;">
                        <input type="submit" id="btnSearch" class="btn btn-default active" value="Cauta" disabled="disabled" style="width:150px;" />
                    </div>
                </div>
            }

我尝试使用此代码解决问题，但没有解决此问题:

window.onload = function() {        
  if (sessionStorage.getItem('makes') == "makes") {
        return;
}

var makes = sessionStorage.getItem('makes');
    if (name !== null) $('#makes').val(makes);
}

window.onbeforeunload = function() {
    sessionStorage.setItem("makes", $('#makes').val());
}

您能否建议检查哪些内容，或者如何解决此问题？谢谢提前!

Answer 1

您可以使用 TempData[]。您甚至可以在其他页面上传递该值，除非您将其设置为 null。