Javascript Course


A cookie is a small piece of information (a string with key=value pair) stored to the user’s computer. Each time a computer requests a page with the same browser, it will send the cookie too. It can be accessed any time the viewer returns to your site, provided the cookie hasn’t been deleted or expired.
If the viewer doesn’t accept cookies, then a cookie won’t be able to be set or used later.
Cookies have some significant limitations:


Creating cookie

To create / set a cookie, just assign the name and value to document.cookie property, in the following format:

document.cookie = 'name=value';

- A cookie can also have some optional parameters, but only the name and the value are required, the other parameters are optional; described below:

You can’t have spaces, commas, or semicolons inside the cookie string, you should allways pass the value part of the string through encodeURIComponent() to make sure you use URI-safe characters.


nume=valoare - the name and value stored in cookie (the name should contain only letters, numbers, and _ ). - Example: 
var val_c ='value';
document.cookie ='some_name='+ encodeURIComponent(val_c);
- The encodeURIComponent() method is applyed to encode the characters like ( =;.).
expires=date - 'date' is a string with the date-time on which this cookie expires.
This must be converted in milliseconds, in GMT format: Wdy, DD-Mon-YYYY HH:MM:SS GMT.
If the expires (or max-age) is nod specified, the cookie will disappear when the browser window is closed. - Example: 
var one_week = 7*24*60*60*1000; //an week in milisecunde
var exp_dt = new Date();
exp_dt.setTime(exp_dt.getTime() + one_week);
document.cookie ='food=fruits; expires='+ exp_dt.toGMTString();
- The toGMTString() method converts the Date object to a string in GMT format.
max-age=seconds - sets the time of existence of the cookie in seconds, after which period the cookie will expire.
It can be used instead of expires, and is more simply.
If neither expires nor max-age specified it will expire when the browser window is closed. - Example: 
var one_week = 7*24*60*60; //an week in secunde
document.cookie ='food=fruits; max-age='+ one_week;
path=path - determines the pages in the site where that cookie can be used.
If not specified, the cookie can be accessed in the directory and subdirectories of the page where it is set. - Example: 
//cookie 'food' is available on all pages in the '/blog' directory (including subdirectories)
document.cookie ='food=fruits; path=/blog';

//cookie 'food' is available on all pages in the 'javascript/test' directory (including subdirectories)
document.cookie ='color=blue; path=/javascript/test';
- To set a cookie available in all the pages of your website, add the root path '/' ( path=/ ).
domain=domain_name - the domain or subdomain that can read that cookie.
If not specified, this defaults to the host portion of the current document location. - Example: 
//cookie 'food' available on all pages of the site: coursesweb.net (including subdomains)
document.cookie ='food=fruits; path=/; domain=coursesweb.net';

//cookie 'color' available on all pages of subdomain: 'bfie.marplo.net/'
document.cookie ='color=blue; path=/; domain=bfie.marplo.net';
secure - if set, the browser will send that cookie over HTTPS only. - Example: 
var one_week = 7*24*60*60; //one week in secunde
document.cookie ='food=fruits; path=/; secure; max-age='+ one_week;

Function to create cookie in JavaScript

The following example shows a useful JavaScript function to create cookie with necessary parameters. 
function setCookie(name, value, maxage, path){
 var maxage =(!maxage) ? '' :'; max-age='+ maxage;
 var path =(!path) ? '' :'; path=' + path;
 document.cookie = name + '='+ encodeURIComponent(value) + maxage + path;
}
- This function can be used as in this code: 
//define a cookie available one week on all pages
var m_age = 7*24*60*60;
setCookie('a_name', 'some-value', m_age, '/');

Reading cookies

To read cookie, you need to get the value of the document.cookie property from the browser.
var mycookie = document.cookie;
document.cookie returns a string with all cookies available in the page. A string like this:
name1=value1; name2=value2; name3=value3
Where name1, name2, name3 are the name of each cookie, and value1, value2, value3 are their values.

- Example: 
<h4>Example document.cookie</h4>
<p>If you click on the button, it will display the value returned by <em>document.cookie</em>.</p>
<button id='btn1'>Cookie</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = document.cookie;
});
</script>
To read a specific cookie, you have to parse the string returned by document.cookie.
To simplify finding a value from a cookie, you can use the getCookie() function from the following JS code: 
function getCookie(name){
 var re ='';
 var str_c =' '+ document.cookie +';'; //puts the cookie string between a space and a ;
 var name =' '+ name +'='; //to look for what it's between name and =
 var start_c = str_c.indexOf(name); //where the name starts
 var end_c;
 if(start_c != -1) { //if contains the specified name
 start_c += name.length; //where the value starts
 end_c = str_c.indexOf(';', start_c); //where the value ends
 re = decodeURIComponent(str_c.substring(start_c, end_c)); //the value
 }
 return re;
}

var val_c = GetCookie('cookie_name');
document.write(val_c); //Displays the value of the cookie, or an empty string ''

Deleting cookie

To delete a cookie, simply have it expire immediately by setting 'max-age' with a negative value, or expire to some time before the current time.
If you specified a domain and path for the cookie, you have to do the same when you delete it: 
//deletes the cookie from name
//path is required only if it was used when the cookie was created
function delCookie(name, path){
 var path =(!path) ? '' :'; path=' + path;
 var two_d = 2*24*60*60; //two days in seconds
 document.cookie = name + "=bye; max-age=-" + two_d + path; 
}
- Just call the delCookie('cookie_name') function.

Full example of using cookies

To understand better what cookies do, how to create and use cookies, study the following example.
It's a more complex example, includes a script with several functions that contain many of the elements presented in this lesson.
The purpose of this example is to understand how the cookies works. It contains a JavaScript script that has functions for working with cookies.
In a column there are input fields to write preferences that will be sent to the JS script that stores them in cookie, and the second column contains a button to display the preferences saved in cookies, and another button to delete cookies.
- Here is the complete code, click on the button below to test it: 
<style>
#add_fav, #show_fav {
display:inline-block;
font-size:18px;
margin:5px 8px;
padding:4px 5px;
}
#add_fav {
background:#dee0fe;
width:350px;
}
#show_fav {
border:1px solid #000;
background:#b0eeb0;
vertical-align:top;
width:250px;
}
#show_fav em {
font-weight:700;
}
#set_c {
display:block;
margin:8px auto;
}
</style>

<h4>Example JS script with cookie</h4>
<p>Fill in the text boxes at the left and then click 'Save Favorite', it calls the 'setCookie()' function that will store them in cookies that will expire in five days.<br>
 Click on "Show Favorites", it calls the "getCookie()" function, this will get the data from cookies and will display the preferences you have added.<br>
 - If you close this window and reopen it, when you click on "Show Favorites", it will display your preferences added earlier.<br><br>
Then clck "Delete cookie" button, it calls the delCookie() function that deletes these cookies.<br>
The next click on "Show Favorites" will display nothing because the cookies with the preferences where deleted.</p>
<div id='add_fav'>
Favorite Color: <input type='text' id='color' maxlength='40' /><br>
Favorite fruits: <input type='text' id='fruits' maxlength='40' /><br>
Favorite quote: <input type='text' id='quote' size='35' maxlength='80' /><br>
 <em id='resp'></em>
<button id='set_c'>Save Favorite</button> <em id='resp'></em>
</div>
<div id='show_fav'>
<button id='get_c'>Show Favorites</button> &nbsp; 
<button id='del_c'>Delete cookie</button>
<div>
Favorite Color: <em id='c_color'></em><br>
Favorite fruits: <em id='c_fruits'></em><br>
Favorite quote: <em id='c_quote'></em>
</div>
</div>

<script>
//sets cookie name with value (available 5 days on all the pages)
function setCookie(name, value, maxage, path){
 var maxage = 5*24*60*60; //5 days in seconds
 document.cookie = name + '='+ encodeURIComponent(value)+'; max-age='+ maxage +'; path=/';
}

//returns the value of the cookie from name, or empty string
function getCookie(name){
 var re ='';
 var str_c =' '+ document.cookie +';'; //puts the cookie string between a space and a ;
 var name =' '+ name +'='; //to look for what it's between name and =
 var start_c = str_c.indexOf(name); //where the name starts
 var end_c;
 if(start_c != -1) { //if contains the specified name
 start_c += name.length; //where the value starts
 end_c = str_c.indexOf(';', start_c); //where the value ends
 re = decodeURIComponent(str_c.substring(start_c, end_c)); //the value
 }
 return re;
}

//deletes the cookie from name
function delCookie(name){ 
 var two_d = 2*24*60*60*1000; //two days in seconds
 document.cookie = name + '=bye; path=/; max-age=-'+ two_d; 
}

//array with names for cookie (the same with input id)
var arr_co =['color', 'fruits', 'quote'];

//the click on #set_c saves data in cookie
document.getElementById('set_c').addEventListener('click', (ev)=>{
 for(var i=0; i<arr_co.length; i++) setCookie(arr_co[i], document.getElementById(arr_co[i]).value);
 document.getElementById('resp').textContent ='- Data saved';
});

//the click on #get_c displays data from cookie
document.getElementById('get_c').addEventListener('click', (ev)=>{
 for(var i=0; i<arr_co.length; i++) document.getElementById('c_'+arr_co[i]).textContent = getCookie(arr_co[i]);
});

//the click on #del_c Delete data saved in cookie
document.getElementById('del_c').addEventListener('click', (ev)=>{
 for(var i=0; i<arr_co.length; i++){
 delCookie(arr_co[i]);
 document.getElementById('c_'+arr_co[i]).textContent ='';
 }
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Cookies

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (19322)
  2. For loops in ActionScript (4456)
  3. CSS cursor property - Custom Cursors (5712)
  4. Multiple Select Dropdown List with JavaScript (13461)
  5. Simple Flash animation, Save, Export (1934)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (206)
  2. Read Excel file data in PHP - PhpExcelReader (74)
  3. The Four Agreements (68)
  4. PHP Unzipper - Extract Zip, Rar Archives (66)
  5. The Mastery of Love (51)
Chat
Chat or leave a message for the other users
Full screenInchide