按位操作应用实例

需求

用户登陆后有多个列表页面中都有搜索功能，由于搜索的条件比较多，所以加了个“更多”按钮隐藏了一部分条件，只把常用的条件直接显示出来。但有些用户会经常用到更多中的条件来搜索，所以希望当点击了“更多”按钮后，我刷新页面或者下次再登陆进来后那个更多中的条件默认就是显示的。

分析

一下子就想到用cookie来做，每个用户每个页面设置个不同的cookie。
但这样会有个问题就是cookie个数太多了。。，去搜索引擎搜索了下，每个站点的cookie是有数量限制的。
不过，即便没有限制，想想那么多个cookie也是件很恐怖的事情。

解决

以前学习mysql的时候，知道可以用无符号的tinyint来存储最多8个数据的0和1的状态，就是将255转换为二进制然后约定第几位代表固定的某个数据或某个物品，1和0来标识其状态。
那这里我想也可以用类似的方法。这样的话，每个用户只用一个相应的cookie就可以搞定了。

实现

下面这个是每个页面不同的部分：

<script type="text/javascript">
    var searchMoreMark = 1;//标识：页面一为1、页面二为2、页面三为4、页面四为8、页面五为16、页面六为32、页面七为64。。依次类推。
</script>

这里是公用的部分,需要先引入jQuery及jQuery.cookie

<script type="text/javascript">
    var searchMoreCookieExpire = 36500;//cookie有效时间
    var searchMoreCookieName = "searchmore_<?=$_SESSION['LOGIN_USER_ID']?>";//根据用户来区分
    jQuery(document).ready(function() {
        //点击展开操作
        jQuery('#do_search_more').click(function(){
            jQuery('#more_condition').css('display','block');
            jQuery('#do_search_more').css('display','none');
            jQuery('#do_search_less').css('display','block');
            jQuery(window).resize();
            //设置“更多”状态
            if(jQuery.cookie(searchMoreCookieName)==null || jQuery.cookie(searchMoreCookieName)==0){
                //如果没有设置过cookie，就设置cookie为当前页面的标识
                jQuery.cookie(searchMoreCookieName, searchMoreMark, {expires:searchMoreCookieExpire, path:'/'});
            }else if((jQuery.cookie(searchMoreCookieName) & searchMoreMark) == 0){
                //如果设置过cookie且不存在当前页面的标识的话就把当前页面标识加进过
                jQuery.cookie(searchMoreCookieName, parseInt(jQuery.cookie(searchMoreCookieName)) | searchMoreMark, {expires:searchMoreCookieExpire, path:'/'});
            }
        });

        //点击收缩操作
        jQuery('#do_search_less').click(function(){
            jQuery('#more_condition').css('display','none');
            jQuery('#do_search_more').css('display','block');
            jQuery('#do_search_less').css('display','none');
            jQuery(window).resize();
            if(jQuery.cookie(searchMoreCookieName)!=null){
                //去除本页面的标识
                searchMoreMark = jQuery.cookie(searchMoreCookieName) & (~searchMoreMark);
                //如果标识为0，那么就删除掉这个cookie
                if(!searchMoreMark){
                    searchMoreCookieExpire = -1;
                }
                jQuery.cookie(searchMoreCookieName, searchMoreMark, {expires:searchMoreCookieExpire, path:'/'});
            }
        });
        //默认为上一次的状态（收缩或展开）
        if(jQuery.cookie(searchMoreCookieName)!=null && (jQuery.cookie(searchMoreCookieName) & searchMoreMark) != 0){
            jQuery('#do_search_more').click();
        }
    }
</script>