{"id":641,"date":"2013-04-23T03:56:43","date_gmt":"2013-04-23T03:56:43","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=641"},"modified":"2017-10-17T00:24:06","modified_gmt":"2017-10-17T00:24:06","slug":"lesson-27-creating-cookies-in-javascript","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/","title":{"rendered":"JavaScript Lesson 27-Creating Cookies"},"content":{"rendered":"<h4 style=\"text-align: center;\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-26-performing-linear-search-array\/\">&lt;Lesson 26&gt;<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/\">&lt;Lesson 28&gt;<\/a><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/\"><br \/>\n<\/a><\/strong><\/h4>\n<p>In this lesson, we will learn how to use JavaScript to create cookies. As we have learned in previous lessons, JavaScript is a scripting language so you can use any text editor to write JavaScipt&#8217;s cookies.<\/p>\n<p>A cookie is a small piece of information sent from a website and stored in a user&#8217;s web browser or hard disk while a user is browsing the website. The function of the cookie is to remember and retrieve the web browsing history of the user. Therefore, it can be used to personalize the web page that a user visit. It is a safe and secure method to store data that the user wishes to use later.Many companies&#8217; websites use cookies for marketing purposes which include advertising. For example, Google employs JavaScript in its famous AdSense advertising program, where publishers can insert generated JavaScript Code in their web pages for displaying advertisements.<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h3><strong>27.1 The Syntax of a Cookie in JavaScript<\/strong><\/h3>\n<p>A JavaScript cookie comprises two important components, the name and value, where the name is a variable that is used to store the value. The syntax is:<br \/>\nname=&#8217;value&#8217;<br \/>\nFor example, the cookie that is used to store a username can be written as follows:<\/p>\n<p>username=&#8217;John&#8217;<\/p>\n<p>* username is the name and John is the value of the cookie.<\/p>\n<p>To create the above cookie, you need to assign the cookie to the <strong>window.document.cookie<\/strong> object. The browser will automatically store the cookie in the memory when it comes across the above statement.<\/p>\n<p>Each cookie should consist of four parts: name, assignment operator, value and semicolon. The assignment statement that creates the cookie is shown below:<\/p>\n<p><span class=\"outputbg\">window.document.cookie=&#8221;Username=&#8217;John&#8217;;&#8221;<\/span><\/p>\n<h3><strong>27.2 The code to create a Cookie in JavaScript<\/strong><\/h3>\n<p>In the previous section, we have learned about the syntax of a cookie in JavaScript. Now we shall learn how to write the actual code to create a cookie in JavaScript. In order to create a cookie, we need to write a JavaScript function. The following JavaScript function will create a cookie that accepts input from the user and store the data in the browser until the browsing session ends.<\/p>\n<pre>&lt;Script language=\"Javascript\" &gt;function CreateCookie()\r\n\r\n{ document.cookie='UserName='+User.value\r\nalert(\"Cookie Created\")\r\nUser.value=\"\"\r\n}\r\n\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\nEnter your name:\r\n&lt;input type=\"text\" name=\"User\"&gt;\r\n&lt;input type=\"button\" value=\"Enter\" name=\"Enter\" onClick=\"CreateCookie()\"&gt;\r\n&lt;\/body&gt;\r\n<\/pre>\n<p>After creating the cookie, we need to read the cookie. In order to read the cookie, we have to write a cookie reading function in JavaScript. The following sample code illustrates how to create and read a cookie.<\/p>\n<pre>&lt;script language=\"javascript\"&gt;\r\n\r\nfunction WriteCookie()\r\n\r\n{document.cookie='name='+student.value\r\nalert(\"Cookie Written\")\r\nstudent.value=\"\"}\r\n\r\nfunction ReadCookie()\r\n{mycookie=unescape(document.cookie.split('=')[1])\r\nshowcookie.value=mycookie}\r\n&lt;\/script&gt;\r\n\r\nEnter Student Name:&lt;input type=\"text\" name=\"student\" &gt;\r\n&lt;input type=\"button\" value=\"Enter\" name=\"Enter\" onClick=\"WriteCookie()\"&gt;&lt;br&gt;&lt;br&gt;\r\nThe cookie is:&lt;input type=\"text\" name=\"showcookie\" &gt;\r\n\r\n&lt;input type=\"button\" value=\"Show Cookie\" name=\"Display\" onClick=\"ReadCookie()\"&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/javascript-tutor.net\/java_tutor\/cookie.htm\">View the output<\/a><br \/>\n* The Script works best in IE<\/p>\n<p>*Note that the\u00a0unescape() function is used to decode an encoded string. For example,<\/p>\n<pre>var1=\"Need%20tips%3F%20Visit%20javascript-tutor.net%21\"\r\nunescape(var1)=Need tips? Visit javascript-tutor.net!\r\n<\/pre>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 style=\"text-align: center;\">\u00a0<strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-26-performing-linear-search-array\/\">&lt;Lesson 26&gt;<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a>\u00a0<strong>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/\">&lt;Lesson 28&gt;<\/a><\/strong><\/strong><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 26&gt;\u00a0[Contents]\u00a0&lt;Lesson 28&gt; In this lesson, we will learn how to use JavaScript to create cookies. As we have learned in previous lessons, JavaScript is a scripting language so you can use any text editor to write JavaScipt&#8217;s cookies. A cookie is a small piece of information sent from a website and stored in a &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 27-Creating Cookies&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-641","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 27-Creating Cookies - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This JavaScript lesson illustrates how to create cookie using javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 27-Creating Cookies - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This JavaScript lesson illustrates how to create cookie using javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-17T00:24:06+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/\",\"name\":\"JavaScript Lesson 27-Creating Cookies - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2013-04-23T03:56:43+00:00\",\"dateModified\":\"2017-10-17T00:24:06+00:00\",\"description\":\"This JavaScript lesson illustrates how to create cookie using javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 27-Creating Cookies\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 27-Creating Cookies - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This JavaScript lesson illustrates how to create cookie using javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 27-Creating Cookies - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This JavaScript lesson illustrates how to create cookie using javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-10-17T00:24:06+00:00","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/","name":"JavaScript Lesson 27-Creating Cookies - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2013-04-23T03:56:43+00:00","dateModified":"2017-10-17T00:24:06+00:00","description":"This JavaScript lesson illustrates how to create cookie using javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 27-Creating Cookies"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=641"}],"version-history":[{"count":39,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/641\/revisions"}],"predecessor-version":[{"id":2406,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/641\/revisions\/2406"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}