Tools & Resources
Community
Personalize User Experience with JavaScript Cookies
In the event where you want to store a cookie based on a user action without passing a link, you would need to use JavaScript. This guide explains how to setup cookies using JavaScript, and later how
In the event where you want to store a cookie based on a user action without passing a link, you would need to use JavaScript. This guide explains how to setup cookies using JavaScript and later how to use logic to control personalization.
Setting up the JavaScript
In Zesty code editor, create a JavaScript file called
cookies.js and paste this code:1
function createCookie(name,value,days) {
2
if (days) {
3
var date = new Date();
4
date.setTime(date.getTime()+(days*24*60*60*1000));
5
var expires = "; expires="+date.toGMTString();
6
}
7
else var expires = "";
8
document.cookie = name+"="+value+expires+"; path=/";
9
}
10
​
11
function readCookie(name) {
12
var nameEQ = name + "=";
13
var ca = document.cookie.split(';');
14
for(var i=0;i < ca.length;i++) {
15
var c = ca[i];
16
while (c.charAt(0)==' ') c = c.substring(1,c.length);
17
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
18
}
19
return null;
20
}
21
​
22
function eraseCookie(name) {
23
createCookie(name,"",-1);
Copied!
When the file is setup, you may now make JavaScript calls to set and read cookies.
Example usage:
1
<script type="text/javascript">
2
createCookie('test_cookie','cookie content',7);
3
var x = readCookie('test_cookie')
4
if (x) {
5
alert('wooo my cookie: ' + x);
6
}
7
</script>
8
​
Copied!
The Business Logic
Parsley access to cookies should not be used on statically cached pages. Note cookies should be used carefully and should not expose sensitive information.
With an
if statement, we are going to check the cookie's value to returned customized content. If it's a match, we will show one type of content, otherwise we will show our default content. It's quick to implement, let's take a look at the code.1
<h1>Page Title</h1>
2
<hr/>
3
{{if @test_cookie == 'cookie content'}}
4
​
5
<h2>{{@test_cookie}}</h2>
6
<p>{{page.personlized_content}}</p>
7
​
8
{{else}}
9
​
10
<p>{{page.default_content}}</p>
11
​
12
{{end-if}}
Copied!
It's that easy, have fun!
Export as PDF
Copy link