The Cookie is a small text file stored in the user’s computer, it helps to store user information in the web pages. Generally, the Cookies are used in the server-side script to store information that the server embeds on the user’s computer. You can also use Cookie in the client-side script without interacting with the server.<\/p>\n
JavaScript Cookie<\/b> is the best option to store data in the web pages without using a server-side script. You can store, read, update, and delete data without interacting with the server. In this tutorial, we will show you how to use Cookies in JavaScript<\/b> to store and modify information in the web pages (client-side script).<\/p>\n
The document.cookie<\/b> property is used to create, read, and delete cookies in JavaScript. <\/p>\nCreate Cookie with JavaScript<\/h2>\n
Use the By default, the cookie is deleted once the browser is closed. But, you can set an expiry date and time (in UTC time) to make the cookie alive as per your needs.<\/p>\n By default, the cookie belongs to the current page. But, you can set a path the cookie belongs to.<\/p>\n Cookie value can be retrieved using the Cookie value can be changed in the same way it created.<\/p>\n Set empty value and pass the previous date in the expires parameter to delete a cookie.<\/p>\n Now, we will create some custom functions to set, get, and delete cookies in JavaScript. These JavaScript functions will provide a user-friendly way to work with cookies on the web page.<\/p>\n The following Note that:<\/span> The “\/” means that the cookie will be available in the entire website domain.<\/p>\n Example Code:<\/b> The following Example Code:<\/b> The following Example Code:<\/b> If you want to store data with Cookies on the web pages, JavaScript cookie will be very useful. You can use our custom functions to manage cookies in JavaScript. Also, our example code can be used to store data in the cookie and get\/update\/delete cookies with JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":" The Cookie is a small text file stored in the user’s computer, it helps to store user information in the web pages. Generally, the Cookies are used in the server-side script to store information that <\/p>\n","protected":false},"author":1,"featured_media":4514,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[342,66],"class_list":["post-4512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-cookie","tag-javascript","cat-10-id","has_thumb"],"yoast_head":"\ndocument.cookie<\/code> property to create a cookie using JavaScript.<\/p>\ndocument<\/span>.cookie = \"name=John Doe\"<\/span>;<\/pre>\ndocument<\/span>.cookie = \"name=John Doe; expires=Wed, 13 Jan 2021 12:00:00 UTC\"<\/span>;<\/pre>\ndocument<\/span>.cookie = \"name=John Doe; expires=Wed, 13 Jan 2021 12:00:00 UTC; path=\/\"<\/span>;<\/pre>\nRead Cookie with JavaScript<\/h2>\n
document.cookie<\/code> property.<\/p>\nvar<\/span> value = document<\/span>.cookie;<\/pre>\nChange Cookie Value with JavaScript<\/h2>\n
document<\/span>.cookie = \"name=Codex World; expires=Wed, 13 Jan 2021 12:00:00 UTC; path=\/\"<\/span>;<\/pre>\nDelete Cookie with JavaScript<\/h2>\n
document<\/span>.cookie = \"name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=\/;\"<\/span>;<\/pre>\nSet Cookie<\/h2>\n
setCookie()<\/code> function helps to create a cookie with a specific name and value using JavaScript.<\/p>\n\n
function<\/span> setCookie<\/span>(name,value,exp_days<\/span>) <\/span>{\r\n var<\/span> d = new<\/span> Date<\/span>();\r\n d.setTime(d.getTime() + (exp_days*24<\/span>*60<\/span>*60<\/span>*1000<\/span>));\r\n var<\/span> expires = \"expires=\"<\/span> + d.toGMTString();\r\n document<\/span>.cookie = name + \"=\"<\/span> + value + \";\"<\/span> + expires + \";path=\/\"<\/span>;\r\n}<\/pre>\n
\nThe following code is used to set a cookie named username<\/code> with the value CodexWorld<\/code> for 5 days.<\/p>\nsetCookie(\"username\"<\/span>, \"CodexWorld\"<\/span>, 5<\/span>);<\/pre>\nGet Cookie<\/h2>\n
getCookie()<\/code> function helps to retrieve the value of a predefined cookie using JavaScript.<\/p>\n\n
function<\/span> getCookie<\/span>(name<\/span>) <\/span>{\r\n var<\/span> cname = name + \"=\"<\/span>;\r\n var<\/span> decodedCookie = decodeURIComponent<\/span>(document<\/span>.cookie);\r\n var<\/span> ca = decodedCookie.split(';'<\/span>);\r\n for<\/span>(var<\/span> i = 0<\/span>; i < ca.length; i++){\r\n var<\/span> c = ca[i];\r\n while<\/span>(c.charAt(0<\/span>) == ' '<\/span>){\r\n c = c.substring(1<\/span>);\r\n }\r\n if<\/span>(c.indexOf(cname) == 0<\/span>){\r\n return<\/span> c.substring(cname.length, c.length);\r\n }\r\n }\r\n return<\/span> \"\"<\/span>;\r\n}<\/pre>\n
\nThe following code is used to get the value of the cookie username<\/code>.<\/p>\nvar<\/span> user = getCookie(\"username\"<\/span>);<\/pre>\nDelete Cookie<\/h2>\n
deleteCookie()<\/code> function helps to remove cookie using JavaScript.<\/p>\n\n
function<\/span> deleteCookie<\/span>(name<\/span>) <\/span>{\r\n var<\/span> d = new<\/span> Date<\/span>();\r\n d.setTime(d.getTime() - (60<\/span>*60<\/span>*1000<\/span>));\r\n var<\/span> expires = \"expires=\"<\/span> + d.toGMTString();\r\n document<\/span>.cookie = name + \"=;\"<\/span> + expires + \";path=\/\"<\/span>;\r\n}<\/pre>\n
\nThe following code is used to remove the cookie username<\/code>.<\/p>\ndeleteCookie(\"username\"<\/span>);<\/pre>\nConclusion<\/h2>\n