How to create Cookies with jQuery? - javascript

How to set cookies for this script?
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_thumb").toggle(function(){
$(this).addClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view");
});
}, function () {
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
});
});
});
</script>

You don't need jQuery for this (though there there are several $.cookie plugins). You can just use the three cross-browser functions found on quirksmode:
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}

Related

How to pass values from one page to another by onclick in javascript?

1Page.js
function TableRow() {
let cells = document.querySelectorAll('#recieve-info td');
cells.forEach(cell => cell.onclick = function () {
let prevcell = cell.previousElementSibling;
if (prevcell) {
let LSItems;
let AddValue = '/images/back_arrow.png.png'
if (localStorage.getItem('passvalue') === null) {
LSItems = [];
} else {
LSItems = JSON.parse(localStorage.getItem('passvalue'));
}
LSItems.push([AddValue]);
localStorage.setItem('passvalue', JSON.stringify(LSItems));
let prev = prevcell.innerHTML;
console.log(prev);
}
});
}
I am trying to pass values by onclick, like if i click on the first one which is 'Save1' i want to save my value only in the first one.
2Page.js
function ParaG() {
document.querySelector('.Second-Para').innerHTML = JSON.parse(localStorage.getItem('passvalue'));
}
Here i want the values.
You can use cookies.
You can save the cookie:
document.cookie = "option=Option1";
And get the cookie:
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
console.log(getCookie("option"))
https://w3schools.com/js/js_cookies.asp

Show a div if a cookie exists

So... I've been trying to show an element for recurrent visitors to my site.
This is how I'm trying to do it: (you can see this JSfiddle as well)
$(document).ready(function() {
// If the 'show cookie is set we show the message
if (!readCookie('show')) {
$('#hide').show();
}
else {
$("#hide").hide();
createCookie("show", true, 1);
}
return false;
});
And I'm also using this cookie functions that I took from w3schools
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
However, it's not working and I'm pretty sure it has something to do with my JQuery attempt, just not sure where my mistake is.
Thanks for any help!
---Edit Update---
Following some advices, this is what I've got now:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<script>
$(function(){
if(Cookies.get('previsitor')) {
$('#atc').show(1000);
}
});
</script>
</head>
<body>
<div id="atc" style="display: none">
Something I want to hide
</div>
<script>
Cookies.set ("previsitor","true",{ expires: 1 });
alert(document.cookie);
</script>
</body>
</html>
I'm using this library for my cookie management: https://github.com/js-cookie/js-cookie
However, it's still not doing what I want, I'm usin the alert(document.cookie); and looks like the cookie is not being created at all... but why!? :(
Try this. This should do the trick.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript">
//pass cookie name
if(checkCookie('the_cookies')){
$('#atc').show();
}
else{
$('#atc').hide();
}
function checkCookie($name)
{
if (typeof $.cookie($name) === 'undefined'){
// set cookie if not exists
$.cookie($name, 'the_value');
return false;
} else {
return true;
}
}
</script>
You just need to create your cookie after the if/else block
$(document).ready(function() {
// If the 'show cookie is set we show the message
if (!readCookie('show')) {
$('#hide').show();
}
else {
$("#hide").hide();
}
createCookie("show", true, 1);
});
Previously, the createCookie function wasn't being called at all since it was nested in the false condition.
Change calling
if (readCookie('show')) {
$('#hide').show();
}
else {
$("#hide").hide();
createCookie("show", true, 1);
}
return false;
});
Change this function
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
{alert(nameEQ.length,c.length);
return c.substring(nameEQ.length,c.length);}
}
return false;
}
This should work!

Making javascript counter stop

I have this counter:
http://codepen.io/leticiamartinch/pen/YpJgqx
Here is the code:
var MAX_COUNTER = 1000000;
var counter = null;
var counter_interval = null;
var deadline = localStorage.deadline;
function setCookie(name,value,days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toGMTString();
}
else {
expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) === 0) {
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
function deleteCookie(name) {
setCookie(name,"",-1);
}
function resetCounter() {
counter = MAX_COUNTER;
}
function stopCounter() {
window.clearInterval(counter_interval);
deleteCookie('counter');
}
function updateCounter() {
var msg = '';
if (counter > 0) {
counter -= 1;
msg = counter;
setCookie('counter', counter, 1);
}
else {
msg = "Counting finished.";
stopCounter();
}
var el = document.getElementById('counter');
if (el) {
el.innerHTML = msg;
}
}
function startCounter() {
stopCounter();
counter_interval = window.setInterval(updateCounter, 1000);
}
function init() {
counter = getCookie('counter');
if (!counter) {
resetCounter();
}
startCounter();
}
init();
I'd like it to decrease in a slower basis so that it doesn't seems to be a timer countdown but full number counter.
Let me guess that you want it to look like e.g. a download counter which has real underlying data instead of a timed counter where people can see that it is just an artificial countdown.
I'd suggest to generate two random numbers - one for the next time interval till decrease and one for the amount of decrease. Set the time interval to be random between - let's say 1 and 3 and the amount between 1 and 5 (depending on how fast you want the countdown to be). You probably want to experiment with the values. Also don't set an initial value of 1000000 because that looks rather obviously fake.
Such an implementation could make sense for example when creating a mockup for a customer where you later put the real underlying data, such that your customer gets a feeling on how the counter will behave later.
If I'm guessing wrongly on what you initially want - please let us know and provide more information.
Here is what you'll get:
var MAX_COUNTER = 1294652;
var counter = null;
var counter_interval = null;
var deadline = localStorage.deadline;
function setCookie(name,value,days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toGMTString();
}
else {
expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) === 0) {
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
function deleteCookie(name) {
setCookie(name,"",-1);
}
function resetCounter() {
counter = MAX_COUNTER;
}
function stopCounter() {
window.clearInterval(counter_interval);
deleteCookie('counter');
}
function updateCounter() {
var msg = '';
if (counter > 0) {
newDecreaseAmount = Math.floor(Math.random() * 3) + 1;
counter -= newDecreaseAmount;
msg = counter;
setCookie('counter', counter, 1);
// set new interval
newInterval = (Math.floor(Math.random() * 5) + 1) * 1000;
counter_interval = window.setTimeout(updateCounter, newInterval);
}
else {
msg = "Counting finished.";
stopCounter();
}
var el = document.getElementById('counter');
if (el) {
el.innerHTML = msg;
}
}
function startCounter() {
stopCounter();
updateCounter();
}
function init() {
counter = getCookie('counter');
if (!counter) {
resetCounter();
}
startCounter();
}
init();

Cookie is not deleting properly using jquery

I have a task to set the cookie for the menu.I have a horizontal menu.When I click on the menu the id of the menu is set in to the cookie.But when I am selecting the next menu cookie shows the first input value.For that I used $.removeCookie("activeDivId");.But it doesn't work properly.How can I solve this problem?
Html code is
<div class="menuBar">
<div id="divHome" class="menuHeader ui-corner-top">
<span>Home</span>
</div>
<div id="divNewTransaction" class="menuHeader ui-corner-top">
<span><a href="#" onclick="NewTransaction()" >New Transaction</a></span>
</div>
</div>
javascript file is
$(document).ready(function () {
$(".menuHeader").click(function () {
$.removeCookie("activeDivId");
$.cookie("activeDivId", this.id); });
alert(document.cookie);
var activeDivId = $.cookie("activeDivId") ? $.cookie("activeDivId") : "divHome";
$("#" + activeDivId).addClass("menuHeaderActive");
});
$(document).ready(function () {
//for debugging purpose, so that you can see what is in the menu cookie
$('#debug').html('Cookie Content : ' + readCookie('menu'));
//if cookie menu exists
if (readCookie('menu')) {
//loop through the menu item
$('#menu a').each(function () {
//match the correct link and add selected class to it
if ($(this).html() == readCookie('menu')) $(this).addClass('selected');
});
}
$('#menu a').click(function () {
//Set the cookie according to the text in the link
createCookie('menu', $(this).html(),1);
});
});
/* Cookie Function */
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
You Can Use this method instead of jquery Method
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
//var fixedName = '';
/// name =name;
document.cookie = name + "=" + value + expires + "; path=/";
this[name] = value;
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length, c.length);
}
return c;
}
function eraseCookie(cookiename) {
this.createCookie(cookiename, '', -1);
this[cookiename] = undefined;
// Ecookie(cookiename);
}

remember cookie

i want to make a cokkie which can save my selected region on netsoltech.com whenever user select the region on map it can save the cookie and when the next time user come on domain the automatic go to 1st time click region page i make this code
but the problem is when the user come on next time then 1st region selector page come then it can refresh and go to the region page.. not the automatic...
<script>
/*
Cookie script - Scott Andrew
Popup script, Copyright 2005, Sandeep Gangadharan
*/
function newCookie(name,value,days) {
var days = 10; // the number at the left reflects the number of days for the cookie to last
// modify it according to your needs
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString(); }
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/"; }
function readCookie(name) {
var nameSG = name + "=";
var nuller = '';
if (document.cookie.indexOf(nameSG) == -1)
return nuller;
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length); }
return null; }
function eraseCookie(name) {
newCookie(name,"",1); }
function toMem(region) {
newCookie('region', region);
window.location= "http://www.netsoltech.com/"+region+"/index";
}
function remCookie() {
window.location= "http://www.netsoltech.com/"+readCookie("region")+"/index";
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
remCookie();
});
</script>
Try this
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
//redirect here
}
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function checkCookie() {
var region = getCookie("region");
if (region != null && region != "") {
alert("redirect to " + region); //replace this with redirect
}
}
checkCookie(); //check this on page load
and the HTML
europe
JSFiddle
http://jsfiddle.net/YtF2B/6/

Categories

Resources