[聚合文章] 分页查询时，使用cookie保存上次的查询条件。jQuery实现方法以及中间遇到的坑

今天做分页查询时需要在跳转页面时保存上次查询的条件，如下：

实现的大致思路就是用cookie本地保存。

其中需要用到jQuery.Cookie 插件。

使用方法很简单：

存数据：$.cookie(“key”,”value”);

取数据： $.cookie(“key”);

我的实现方法就是在每次点击 “查询”按钮时，把查询的条件放入 cookie 。

在页面初始化时，会调用 jQuery ，这时把 cookie 存放的值从新放入表单中。

//当点击提交时把查询的参数存到cookie
                $("#condition").click(function(){
                    $.cookie('c_name', $("input[name='c_name']").val());
                    $.cookie('c_id', $("select[name='c_id']").val());
                    $.cookie('s_id', $("select[name='s_id']").val());
                    
                })
                //alert($("select[name='c_id']").val()+":"+$("select[name='s_id']").val())
                //加载页面时将之前提交的参数赋值
                if($.cookie('c_name')!=0&&$.cookie('c_name')!=null){
                    $("input[name='c_name']").val($.cookie('c_name'));
                }
                
                if($.cookie('c_id')!=0&&$.cookie('c_id')!="null"){
                    $("select[name='c_id']").val($.cookie('c_id'));
                }
                if($.cookie('s_id')!=0&&$.cookie('s_id')!="null"){
                    $("select[name='s_id']").val($.cookie('s_id'));
                }

实现步骤很简单，但是其中却有一个坑：

在把 cookie 的值插入表单前，需要进行验证，看值是不是 null 或者空值。

因为第一次打开页面时 cookie 是没有值，如果不验证就会出现下面这样：

正常情况下进行非空验证需要下面两步：

$.cookie('c_id')!=0 && $.cookie('c_id')!=null

但是当我使用却发现即使没存值， .cookie(“c_id”)!=null 也返回 true

最后搞了很久发现，当 null 值存入 cookie 时，是存入了一个 ”null” 的字符串。不仅如此，对 true 、 false ，也是这样的处理，所以在进行比较时就需要加双引号：

$.cookie('c_id')!=0 && $.cookie('c_id')!=”null”

这时我就思考了一下，可能不止 cookie ，对于其他一些 key-value 类型的容器，对 null 、 false 、 true 等这些特殊符号可能也是做字符串处理，大家以后一定要注意。