刷新页面将提示是否保存数据---JS

最新推荐文章于 2023-09-12 10:48:30 发布

原创最新推荐文章于 2023-09-12 10:48:30 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#数据

javascript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种JavaScript方法，用于检测HTML表单是否已被修改，并在用户尝试离开页面前提示保存更改。同时，利用localStorage存储表单数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <body>
        <form action="" method="post" name="someForm">

            <input type="text" name="name" id="name" />
            <input type="button" id="btn" value="btn"/>         
            <select name="">
                <option value="11">11</option>
                <option value="22">22</option>
                <option value="33">33</option>
            </select>
        </form>


    </body>

    <script>

function formIsDirty(form) {
  for (var i = 0; i < form.elements.length; i++) {
    var element = form.elements[i];
    var type = element.type;
    if (type == "checkbox" || type == "radio") {
      if (element.checked != element.defaultChecked) {
        return true;
      }
    }
    else if (type == "hidden" || type == "password" || type == "text" || type == "textarea") {
      if (element.value != element.defaultValue) {
        return true;
      }
    }
    else if (type == "select-one" || type == "select-multiple") {
      for (var j = 0; j < element.options.length; j++) {
        if (element.options[j].selected != element.options[j].defaultSelected) {
          return true;
        }
      }
    }
  }
  return false;
}
window.onbeforeunload = function (e) {

  e = e || window.event;
  if (formIsDirty(document.forms["someForm"])) {
    var name1 = localStorage.setItem('name',name);
    console.log(localStorage.getItem('name'));
    // IE 和 Firefox
    if (e) {
      e.returnValue = "对不起，页面数据已做修改，尚未保存，确定要刷新或离开本页面？";
    }
    // Safari浏览器
    return "对不起，页面数据已做修改，尚未保存，确定要刷新或离开本页面？";
  }
};      
    </script>