BoostrapV4、JQuery、localStorage综合应用测试

代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Local Storage Example</title>
    <!-- include Bootstrap CSS for layout -->
    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <h1>HTML5 Local Storage Example</h1>
      <form method="post" class="form-horizontal">
        <fieldset>
          <legend>Enquiry Form</legend>
          <div class="control-group">
            <label class="control-label" for="type">Type of enquiry</label>
            <div class="controls">
              <select name="type" id="type">
                <option value="">Please select</option>
                <option value="general">General</option>
                <option value="sales">Sales</option>
                <option value="support">Support</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="name">Name</label>
            <div class="controls">
              <input
                class="input-xlarge"
                type="text"
                name="name"
                id="name"
                value=""
                maxlength="50"
              />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="email">Email Address</label>
            <div class="controls">
              <input
                class="input-xlarge"
                type="text"
                name="email"
                id="email"
                value=""
                maxlength="150"
              />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="message">Message</label>
            <div class="controls">
              <textarea
                class="input-xlarge"
                name="message"
                id="message"
              ></textarea>
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <label class="checkbox">
                <input name="subscribe" id="subscribe" type="checkbox" />
                Subscribe to our newsletter
              </label>
            </div>
          </div>
        </fieldset>
        <div class="form-actions">
          <input
            type="submit"
            name="submit"
            id="submit"
            value="Send"
            class="btn btn-primary"
          />
        </div>
      </form>
    </div>
    <script src="./jquery/jquery-3.6.0.js"></script>
    <script>
      $(function () {
        /*
         * 判断是否支持localstorage
         */
        if (localStorage) {
          /*
           * 读出localstorage中的值
           */
          if (localStorage.type) {
            $("#type")
              .find("option[value=" + localStorage.type + "]")
              .attr("selected", true);
          }
          if (localStorage.name) {
            $("#name").val(localStorage.name);
          }
          if (localStorage.email) {
            $("#email").val(localStorage.email);
          }
          if (localStorage.message) {
            $("#message").val(localStorage.message);
          }
          if (localStorage.subscribe === "true") {
            $("#subscribe").prop("checked", true);
          } else {
            $("#subscribe").prop("checked", false);
          }
          /*
           * 当表单中的值改变时,localstorage的值也改变
           */
          $("input[type=text],select,textarea").change(function () {
            $this = $(this);
            localStorage[$this.attr("name")] = $this.val();
          });
          $("input[type=checkbox]").change(function () {
            $this = $(this);
            localStorage[$this.attr("name")] = $this.prop("checked");
          });
          $("form")
            /*
             * 如果表单提交，则调用clear方法
             */
            .submit(function () {
              localStorage.clear();
            })
            .change(function () {
              console.log("===========");
              console.log(localStorage);
            });
        }
      });
    </script>
  </body>
</html>

 

posted @ 2021-10-24 11:22  dshow  阅读(47)  评论(0)    收藏  举报