How to set a cookie and expire it in 30 days [ javascript ]

javascript

How to set a cookie and expire it in 30 days

611

9:51 am, February 2, 2021

How to set a cookie and expire it in 30 days

Here is some basic usage for the js cookie library.
Include the following script. Or you can grab the latest version at the cdnjs website.
<h4>HTML</h4>
<pre><code class="html hljs xml"><script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script></code></pre>
<h3>How to set a cookie</h3>
this sets a cookie named kruxor with the value awesome. 
<h4>Javascript</h4>
<pre><code class="javascript hljs">// set a cookie
Cookies.set('kruxor', 'awesome');</code></pre>
<h3>How to set a cookie with expiry</h3>
this sets a cookie named kruxor and the value awesome with the expiry of 30 days. 
<h3>Checking a cookie</h3>
use this code to check a cookie is set
<h4>Javascript</h4>
<pre><code class="javascript hljs">Cookies.get('kruxor')</code></pre>
<h3>How to check if a cookie is set i chrome</h3>
open dev tools, f12, go into the application tab, and then scroll down until you see cookies. 
<img src="https://i.imgur.com/n87oUNe.png" />
<h4>Javascript</h4>
<pre><code class="javascript hljs">Cookies.set('kruxor', 'awesome', { expires: 30 })</code></pre>
<h3>Further Documentation on JS Cookie</h3>
<a class="btn btn-primary" href="https://github.com/js-cookie/js-cookie?utmsource=cdnjs&utmmedium=cdnjslink&utmcampaign=cdnjslibrary " target="blank" rel="noopener">View on Github</a>
<h3>Get the latest CDNJS version of this code here:</h3>
<a class="btn btn-primary" href="https://cdnjs.com/libraries/js-cookie ">View JS Cookie on CDNJS</a>
 
<h2>Basic Usage</h2>
Create a cookie, valid across the entire site:
<div class="highlight highlight-source-js position-relative overflow-auto">
<pre>Cookies.set('name', 'value')</pre>
</div>
Create a cookie that expires 7 days from now, valid across the entire site:
<div class="highlight highlight-source-js position-relative overflow-auto">
<pre>Cookies.set('name', 'value', { expires: 7 })</pre>
</div>
Create an expiring cookie, valid to the path of the current page:
<div class="highlight highlight-source-js position-relative overflow-auto">
<pre>Cookies.set('name', 'value', { expires: 7, path: '' })</pre>
</div>
Read cookie:
<div class="highlight highlight-source-js position-relative overflow-auto">
<pre>Cookies.<span class="pl-token" data-hydro-click="{"eventtype":"codenavigation.clickonsymbol","payload":{"action":"clickonsymbol","repositoryid":32531480,"ref":"master","language":"Markdown","originatingurl":"https://github.com/js-cookie/js-cookie?utmsource=cdnjs&utmmedium=cdnjslink&utmcampaign=cdnjslibrary%C2%A0","userid":1638751}}" data-hydro-click-hmac="9868dc152d8896b56c25b7219d1b804bf57078fcaafa77350a9c260a7e05656f">get('name') // => 'value'
Cookies.get('nothing') // => undefined</pre>
</div>
Read all visible cookies:
<div class="highlight highlight-source-js position-relative overflow-auto">
<pre>Cookies.get() // => { name: 'value' }</pre>
</div>
Note: It is not possible to read a particular cookie by passing one of the cookie attributes (which may or may not have been used when writing the cookie in question):
<div class="highlight highlight-source-js position-relative overflow-auto">
<pre>Cookies.get('foo', { domain: 'sub.example.com' }) // domain won't have any effect...!</pre>
</div>
The cookie with the name <code>foo</code> will only be available on <code>.get()</code> if it's visible from where the code is called; the domain and/or path attribute will not have an effect when reading.
Delete cookie:
<div class="highlight highlight-source-js position-relative overflow-auto">
<pre>Cookies.remove('name')</pre>
</div>
Delete a cookie valid to the path of the current page:
<div class="highlight highlight-source-js position-relative overflow-auto">
<pre>Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!</pre>
</div>
IMPORTANT! When deleting a cookie and you're not relying on the <a href="https://github.com/js-cookie/js-cookie?utmsource=cdnjs&utmmedium=cdnjslink&utmcampaign=cdnjs_library%C2%A0#cookie-attributes">default attributes</a>, you must pass the exact same path and domain attributes that were used to set the cookie:
<div class="highlight highlight-source-js position-relative overflow-auto">
<pre>Cookies.remove('name', { path: '', domain: '.yourdomain.com' })</pre>
</div>
Note: Removing a nonexistent cookie neither raises any exception nor returns any value.

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>

Javascript

// set a cookie
Cookies.set('kruxor', 'awesome');

Posted in javascript

611

9:51 am, February 2, 2021

View Statistics

This Week

251

This Month

1686

This Year

695

No Items Found.

Add Comment

Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Latest News

## 🚀 AI Giants Hit Bullseye: Anthropic & OpenAI Achieve Product-Market Fit Anthropic and OpenAI have reached a significant milestone, finding product-market fit with their AI technologies, which means their products effectively meet the needs of their customers, driving growth and adoption. This achievement showcases the practical value of their innovations, enabling businesses and individuals to leverage AI for enhanced productivity and efficiency. With this alignment of product and market needs, these companies are poised to transform industries and shape the future of technology.

How to set a cookie and expire it in 30 days

How to set a cookie and expire it in 30 days

Scripts

Javascript

View Statistics

Add Comment

Other Items in javascript

Related Search Terms

Other Categories in Code

Search Code

Latest from Code

Welcome

Random Quote

Latest News

Latest Articles

Code

Links

Quick Links

Quick Links

Sections