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>
标签:JQuery,function,name,val,BoostrapV4,subscribe,localStorage,type 来源: https://www.cnblogs.com/dshow/p/15450526.html