正在检查用户是否在 JQuery 中有未保存的数据？

Question

我有以下代码...

    var leave_page_confirm=false;

    if ($(':input.common_class').val().length !== 0) {

        var leave_page_confirm=true;

    }

    window.onbeforeunload = save_data_check;

      function save_data_check()
      {

        if (leave_page_confirm) {
          return "You have unsaved information on the page.";

        }

      }

我正在尝试查看页面上的任何输入是否有价值。如果他们不这样做，那么您可以在不留言的情况下离开页面。如果他们这样做，则会有一条消息询问您是否要离开该页面。我页面上的所有输入都有一个共同的 class。

Answer 1

一种粗略的方式

var leave_page_confirm=false;
$('input').each(
    function(){
        if($(this).val()){
        leave_page_confirm = true;
        }
    });

Answer 2

因为您正在使用 jQuery 已经使用了每个。

var leave_page_confirm = true;

$('.common_class').each(function(){
    if($(this).val().length == 0)
        leave_page_confirm = false
});

如果其中任何一个为假，还要检查是否为假，它将始终 return 为假，而不用担心检查每个并设置真或假。 1 空总是 false。

Answer 3

试试这个

var changesSaved =true;
    function hasPendingChanges()
    {
    changesSaved=$(':input.common_class').val().length == 0;
    }
    window.onbeforeunload = save_data_check;
    function save_data_check()
          {

            if (!changesSaved) {
              return "You have unsaved information on the page.";

            }
}

Answer 4

关于我遵循的逻辑的一些信息：
这段代码不保存任何东西，如果你只需要用JS存储一些信息，那么在客户端计算机上，这将取决于缓存，你可以使用cookie（信息是临时的，因为依赖于可以删除的cookie ，所以也许您可以存储未保存的值以等待用户提交它们）。
第一个片段基于这样的想法，即一旦您保存了信息，输入将不会被清除（它们将保留信息），这意味着 js 检查用户是否对它们进行了任何更改（可以更聪明，也许检查是否value 确实与开始的不同）并将 var 设置为 true/false，一旦用户离开页面，就会检查 var。

第二个脚本基于输入是表单或类似内容的一部分的想法，因此一旦提交，输入将被清除。如果用户离开页面，代码会检查是否有任何非空（已保存）值。

总结一下：

第一个检查是否对输入

进行了任何更改

第二个检查输入是否包含一个值

我不明白未保存的数据：未保存的数据还是空值？我的意思是如果用户保存一个非空值然后清除输入？

这就是我的想法：基本上每次输入更改时，它都会将 saved var 设置为 false，一旦你点击按钮保存（或所有其他逻辑），它会将值设置为 true ，否则一旦您卸载页面，脚本就会检查 var 以查看它是 true 还是 false
HTML:

<input type='input' class='test' />
<input type='input' class='test' />
<input type='input' class='test' />
<input type='input' class='test' />
<input type='input' class='test' />
<input type='input' class='test' />
<button class='save'>Save</button>

JQUERY

var saved= true;

window.onbeforeunload = function () {
    if (!saved) {
        return 'Would you like to save?';
    }
};

$('.test').on('input', function(){
    saved=false;
 });

$('.save').click(function(){
    saved=true;
});

如果您只需要检查输入值：

window.onbeforeunload = function () {
    var saved= true;
    $('.test').val(function(e,v){
            //This check if the value is not empty
            //if you want any kind of value use if(v)
            if(v.trim()!=""){
                saved=false;
                return;
            }
        });
    if(!saved)
        return 'Would you like to save?';
};

即使使用纯 js 也可以实现：

window.onbeforeunload = function () {
    var saved= true,
        items= document.getElementsByClassName('test'),
        count= items.length;

    for(i=0;i<count;i++){
        if(items[i].value!=""){ //if(items[i].value)
                saved=false;
                break;
            }
        };
    if(!saved)
        return 'Would you like to save?';
};

编辑 Cookie 部分 - 已修复 - 有效

$(document).ready(function() {
            var cookieVal = getCookie('formValue');
            if(cookieVal){
                var list=$.parseJSON(cookieVal);
                $('.test').each(function(){
                    if($(this).attr('name') in list)
                        $(this).val(list[$(this).attr('name')]);
                });
                document.cookie = 'formValue=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
            }
        });

        window.onbeforeunload = function () {
            var saved= true;
            $('.test').each(function(){
                    if($(this).val().trim()!=""){
                        saved=false;
                        return;
                    }
                });
            if(!saved){
                var itemObj= new Object,
                    d = new Date();
                d.setTime(d.getTime() + (30*24*60*60*1000));

                var expires = "expires="+d.toUTCString();
                $('.test').val(function(e,v){
                    if($(this).attr('name'))
                        itemObj[$(this).attr('name')]=v;
                });
                itemObj=JSON.stringify(itemObj);
                document.cookie = 'formValue=' + itemObj + "; " + expires;

                return 'Would you like to save?';
            }
        };

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1);
                if (!Array.prototype.indexOf) {
                    Array.prototype.indexOf = function(obj, start) {
                        for (var i = (start || 0), j = this.length; i < j; i++) {
                            if (this[i] === obj) { return i; }
                        }
                        return -1;
                    }
                }
                if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
            }
            return "";
        }

Answer 5

我通常使用更改事件来跟踪任何输入的更改，

var leave_page_confirm = false;
    $(function() {
        $(':input.common_class').change(function(){             
            leave_page_confirm = true;
            if(!leave_page_confirm)
            window.onbeforeunload = save_data_check;
        });
    });

    function save_data_check(){        
          return "You have unsaved information on the page.";
    }

正在检查用户是否在 JQuery 中有未保存的数据？

Checking if user has unsaved data in JQuery?

javascript

jquery

exit

prompt