How to set and read cookies using php and jquery
- 2020-08-22 21:55:58
- OfStack
The HTTP protocol is a stateless protocol, which means that every request you make to a website is independent and therefore cannot store data through itself. But this simplicity is one reason why it spread so widely in the early days of the Internet.
However, it still has a way of letting you save the information between requests in the form of cookies. This approach allows you to manage sessions and maintain data more efficiently.
There are two ways to handle cookies -- the server (php,asp, etc.) and the client (javascript). In this tutorial, we will learn how to create cookies in both php and javascript.
Cookies and php
setting cookies
To create cookie in php, you need the method setcookie. It requires some parameters (all parameters are optional except that the first parameter is required)
setcookie(
'pageVisits', //cookie Name, required
$visited, //cookie The value of the
time()+7*24*60*60, // Expiration time , Set to 1 A few weeks
'/', //cookie Available file paths
'demo.tutorialzine.com' //cookie Bound domain name
)
If the expiration time is set to 0(which is also the default), cookie will be lost when the browser restarts.
The '/' parameter means that all file paths under your domain name cookie can be used (you can also set a single 1 file path for it, e.g. '/admin/').
You can also pass this function two extra arguments, which are not given here. They are specified as type boolean.
The first parameter means that cookie only operates on a secure HTTPS connection, while the second parameter means that cookie cannot be operated with javascript.
For most people, you only need the fourth parameter and ignore the rest.
reading cookies
Reading cookie with php is much easier. All the cookies passed to the script are in the $_COOKIE super global array.
In our example, we can read cookies using the following code:
$visits = (int)$_COOKIE['pageVisits']+1;
echo "You visited this site: ".$visits." times";
It's worth noting that when the next page loads, you can also use $_COOKIE to get the cookies you set using the setcookie method,
You should be aware of something.
deleting cookies
To delete cookies, you simply use the setcookie function to set an expiration date for cookies that has passed.
setcookie(
'pageVisits',
$visited,
time()-7*24*60*60, // Set to the former 1 Last week, cookie Will be deleted
'/',
'demo.tutorialzine.com'
)
Cookies and jQuery
To use cookies in jquery, you need 1 plug-in Cookie plugin.
Setting cookies
Setting cookies with Cookie ES79en-ES80en is straightforward:
$(document).ready(function(){
// Setting a kittens cookie, it will be lost on browser restart:
$.cookie("kittens","Seven Kittens");
// Setting demoCookie (as seen in the demonstration):
$.cookie("demoCookie",text,{expires: 7, path: '/', domain: 'demo.tutorialzine.com'});
// "text" is a variable holding the string to be saved
});
Reading cookies
It's even easier to read cookie, just call the $.cookie () method and give it an ES89en-ES90en, which returns the value of cookie:
$(document).ready(function(){
// Getting the kittens cookie:
var str = $.cookie("kittens");
// str now contains "Seven Kittens"
});
Deleting cookies
To delete cookie, just make the $.cookie () method a second time and set the second parameter to null.
$(document).ready(function(){
// Deleting the kittens cookie:
var str = $.cookie("kittens",null);
// No more kittens
});
Complete examples:
demo.php
<?php
// Always set cookies before any data or HTML are printed to the page
$visited = (int)$_COOKIE['pageVisits'] + 1;
setcookie( 'pageVisits', // Name of the cookie, required
$visited, // The value of the cookie
time()+7*24*60*60, // Expiration time, set for a week in the future
'/', // Folder path, the cookie will be available for all scripts in every folder of the site
'demo.tutorialzine.com'); // Domain to which the cookie will be locked
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MicroTut: Getting And Setting Cookies With jQuery & PHP | Tutorialzine demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css" />
<mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></mce:script>
<mce:script type="text/javascript" src="jquery.cookie.js" mce_src="jquery.cookie.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function(){
var cookie = $.cookie('demoCookie');
// If the cookie has been set in a previous page load, show it in the div directly:
if(cookie) $('.jq-text').text(cookie).show();
$('.fields a').click(function(e){
var text = $('#inputBox').val();
// Setting a cookie with a seven day validity:
$.cookie('demoCookie',text,{expires: 7, path: '/', domain: 'demo.tutorialzine.com'});
$('.jq-text').text(text).slideDown('slow');
e.preventDefault();
});
$('#form1').submit(function(e){ e.preventDefault(); })
})
// --></mce:script>
</head>
<body>
<h1>MicroTut: Getting And Setting Cookies With jQuery & PHP</h1>
<h2>Go Back <a href="http://tutorialzine.com/2010/03/microtut-getting-setting-cookies-jquery-php/" mce_href="http://tutorialzine.com/2010/03/microtut-getting-setting-cookies-jquery-php/">To The Tutorial »</a></h2>
<div class="section">
<div class="counter"><?php echo $visited?></div>
<p>The number above indicates how many times you've visited this page (PHP cookie). Reload to test.</p>
</div>
<div class="section">
<div class="jq-text"></div>
<form action="" method="get" id="form1">
<div class="fields">
<input type="text" id="inputBox" />
<a href="">Save</a>
</div>
</form>
<p>Write some text in the field above and click Save. It will be saved between page reloads with a jQuery cookie.</p>
</div>
</body>
</html>
jquery.cookie.js
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
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();
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
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
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('');
} 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;
}
};
styles.css
*{
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
color:#555555;
font-size:0.825em;
background: #fcfcfc;
font-family:Arial, Helvetica, sans-serif;
}
.section{
margin:0 auto 60px;
text-align:center;
width:600px;
}
.counter{
color:#79CEF1;
font-size:180px;
}
.jq-text{
display:none;
color:#79CEF1;
font-size:80px;
}
p{
font-size:11px;
padding:0 200px;
}
form{
margin-bottom:15px;
}
input[type=text]{
border:1px solid #BBBBBB;
color:#444444;
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:14px;
letter-spacing:1px;
padding:2px 4px;
}
/* The styles below are only necessary for the styling of the demo page: */
h1{
background:#F4F4F4;
border-bottom:1px solid #EEEEEE;
font-size:20px;
font-weight:normal;
margin-bottom:15px;
padding:15px;
text-align:center;
}
h2 {
font-size:12px;
font-weight:normal;
padding-right:40px;
position:relative;
right:0;
text-align:right;
text-transform:uppercase;
top:-48px;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
.clear{
clear:both;
}
h1,h2,p.tutInfo{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
Conclusion:
Regarding cookie, you need to be careful not to save sensitive information (such as username and password) in cookies.
For this reason, cookies will be delivered to the page like headers1 when every page is loaded, which is easy to be intercepted by illegal elements.
But with proper precautions, you can achieve a lot of interaction with this simple technology.