【连载】实用小demo连载 2 —— Cookie 记录和获取 demo 2015-08-05 13:48 3人阅读 评论(0) 收藏

小demo连载系列2


这次讲述用jQuery的Cookie库函数，记录和获取cookie的过程


用实例带大家迅速上手学会cookie的使用


demo下载地址（所有连载的demo都是免费）：

http://download.csdn.net/detail/snow_finland/8961861


具体代码（由于写demo的时候，写了非常完备的代码注释，这里就不做赘述了）：


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Cookie Demo</title>
</head>

<body>
	<label for="J_input_name">请输入名字</label>
	<input type="text" value="" id="J_input_name" />
	<a href="javascript:;" id="J_submit">提交</a>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
/*
 * Cookie Demo v 1.0.0
 * 2015-08-05 Edit by Jane
 * jQuery.cookie jQuery的cookie封装函数
 * name cookie的名字
 * value cookie的值
 * options 是个object，可填的值有expires，过期时间；path，路径；domain，作用域；secure
*/ 
jQuery.cookie = function(name, value, options) {
	// 如果填写了name和value字段，那么是设置cookie
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
				
				// 这里的最小时间单位是1天（24 * 60 * 60 * 1000），如果需要几个小时，几分钟，需要调整这里的参数
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        var path = options.path ? '; path=' + options.path : '';
        var domain = options.domain ? '; domain=' + options.domain : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
	
	// 如果只填写了name字段，那么是获取cookie
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

$(document).ready(function(){
	// 取出cookie中name的值，只填写name字段代表取出cookie的值
	var name = $.cookie('name');
	// 如果是真实存在的值，那么把它预填到名字输入框
    if( name != null && name != undefined && name != 'undefined'){
		$('#J_input_name').val(name);
	}
	
	$('#J_submit').click(function(){
		var tmp_name = $.trim($('#J_input_name').val());
		$.ajax({
			type: 'POST',
			url: 'save.php',
			data: {name:tmp_name},
			dataType: "json",
			success:function(data){
				alert('欢迎，'+tmp_name);
				// 提交成功后，把name保存到cookie中，保存时间为1年365天，保存在根目录（path:'/'），有value字段值代表存cookie
				$.cookie('name',tmp_name,{expires:365,path:'/'});
			},
			error:function(){
				alert('提交失败');
			}
		});
	});
});
</script>
</body>
</html>


其中save.php只是一个接口，为了能请求的到，这里demo给个save.php 


<?php
	echo 1;
?>


cookie保存之后，在浏览器的cookie里面可以查看到



版权声明：本文为博主原创文章，未经博主允许不得转载。

posted @ 2015-08-05 13:48  snow_finland  阅读(163)  评论(0)  编辑  收藏  举报