option怎么让下拉显示的值是我上次选择的值

尝试过一些方法，没得到实现，希望大家帮帮我，附上代码部分和图片

img

img

img

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="icon" href="" />
    <title>html</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/mdui/1.0.2/css/mdui.min.css"
    />
    <style>
      body {
        padding: 20px;
      }
      h3 {
        text-align: center;
      }
      .mdui-select {
        width: 30%;
      }
    </style>
  </head>
  <body>
    <!--引入mdui只是为了样式好看-->
    <h3>select回显值的示例</h3>
    <select class="mdui-select" mdui-select id="c-supplier_status">
      <option value="正常" selected>正常</option>
      <option value="冻结">冻结</option>
      <option value="下线">下线</option>
    </select>
    <script src="https://cdn.staticfile.org/mdui/1.0.2/js/mdui.min.js"></script>
    <script>
      let app = document.getElementById("c-supplier_status");
      //1. 本地缓存方式,可用localStorage，sessionStorage，cookie;这里以sessionStorage示例
      let data = sessionStorage.getItem("select_value")
        ? sessionStorage.getItem("select_value")
        : "正常"; //设置一个默认值
      app.value = data;
      //2. http请求,比如用axios
      //   axios.get('http://api.xxx.com').then(res=>{
      //       app.value=res.value;//
      //    })
      app.onchange = function (e) {
        let result = e.target.value; //获取到下拉选中更多值；
        console.log("选中的值是：", result);
        //1. 本地缓存方式
        sessionStorage.setItem("select_value", result);
        //2. 通过http请求发给后端存储，比如axios
        // axios.post('http://api.xxx.com',{result})
      };
    </script>
  </body>
</html>

在bosstrap中，使用select想要回显上一次的值，可以给select绑定一个change方法（每次选择option都会触发），方法里面定义一个参数，用缓存或者cookie的方法将该参数存储起来，后面返回这个页面的时候取出存储值重新给select赋值即可。