How do delete elements from page based on cookie value? - javascript

I want to create a button on my webpage, which when clicked, sets a cookie with a specified value. The cookie should be valid for the entire domain, all its directories and sub-domains.
The code I'm using now is this:
function setCookie(cname, cvalue, exdays)
{
var d = new Date();
d.setTime(d.getTime() + (365*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
}
Then, once the cookie and its value is set, I want that button to get deleted from the page. Also, next time the page loads, I want to check if the cookie and the value exists and if not, show the button or else, delete the button.
The button in context has an id: delete
I'm using this code to check for cookie and its value:
function getCookie(name1)
{
var name = name1 + "value1";
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 "";
}
I've found these codes from here: https://www.w3schools.com/js/js_cookies.asp
I'm going to use this code to delete the element if the cookie and its value is present:
function removeElement(elementId)
{
var element = document.getElementById(delete);
element.parentNode.removeChild(element);
}
I've taken this code from here: https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript
I don't know how to link those 2 fuctions to carry out the required action.

Here is a working solution for you. Take a look at the comments inside the Code.
Are u new to JS? in this case you should take a look at codecademy. Its for free and you will learn the basics very fast.
Note that SO does not allow you to check or set cookies. For that reason the runable code below will cause an error. Here is a working fiddle.
if (getCookie('myCookie')) removeElement('myButton'); // remove if cookie is set
if (document.getElementById('myButton')) document.getElementById('myButton').onclick = function() { // bind function to clickevent
setCookie('myCookie', 'myValue', 1); // set cookie
removeElement('myButton'); // remove button
}
function setCookie(cname, cvalue, exdays) { // your setCookie Funktion
var d = new Date();
d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + '=' + cvalue + '; '+ expires + ";path=/"; // reset to w3schools solution
}
function getCookie(name) { // your getCookie Funktion
// removed 'var name = ...' because you wont find your cookie if you changing the name here
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 "";
}
function removeElement(elementId) { // your removeElement Function
var element = document.getElementById(elementId); // variable delete was undefined, if your buttons id was delete you had to write it in ''
element.parentNode.removeChild(element);
}
<button type="button" id="myButton">
click me
</button>

Going by your requirements you just want to delete a specific button if the cookie is present.
In this case you will need to do 2 things.
Call the getCookie and based on the return value call the removeElement at the end of the setCookie method.
Note: I am assuming your setCookie method is synchronous.
Load the button by default and do the same as Step 1 once the page is loaded.
To summarize, your mrthods should look like this:
setCookie method:
function setCookie(cname, cvalue, exdays){
var d = new Date();
d.setTime(d.getTime() + (365*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
if(getCookie(cname)) removeElement('delete');
}
After Loading the document:
document.onload = ()=>{
if(getCookie(cname)) removeElement('delete');
}

Related

Website not getting cookie info correctly and spamming reload

I'm trying to define a version for my website so it can reload the resources if the versions don't match. The problem is that when I fetch the cookie, the cookie value is not returned. The result of this is that the website is in a constant state of reloading.
I made sure that the cookie was there and I tried using my functions in the console and setting the cookie manually.
Webpage:
var version = '1.0.0';
var cVersion = version == getCookie("version");
if(!cVersion) {
setCookie("version", version, 1000);
window.location.reload(true);
}
Cookies Script:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
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 "";
}
The website should reload and update the version number if they are different and do nothing if they are the same.

how can i test my script to delete cookies

I wrote a script in javascript to delete all cookies (except some included in a whitelist) within the current domain (using document.cookie). How can I make sure that it is working and indeed deleting the cookies?
I ran it in the browser by including it in an html file and then opening that file, but I don't understand how to test that it will delete cookies within the domain since when I open an html file it is not associated with a domain.
Here is my code:
//cookies we need
const whitelist = [
'example_cookie',
];
function removeUnnecessaryCookies() {
let decodedCookie = decodeURIComponent(document.cookie); //check for special characters
let allCookies = decodedCookie.split(';'); //make array of all cookies in domain
for (var i = 0; i < allCookies.length; i++) {
let cookie = allCookies[i];
if (!whitelist.includes(cookie)) {
deleteCookie(cookie);
}
}
}
/* helper function to delete cookies */
function setCookie(cookieName, cookieValue, cookieExpiry) {
let date = new Date();
date.setTime(date.getTime() + (cookieExpiry*24*60*60*1000));
let expires = "expires=" + date.toUTCString();
document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
}
function deleteCookie(cookieName) {
setCookie(cookieName, '', -100);
}
removeUnnecessaryCookies();
Write a getCookie method and test for that. Here is an example:
function setCookie(name, value, days) {
var expiry = new Date()
expiry.setTime(expiry.getTime() + (days * 24 * 60 * 60 * 1000))
var expires = 'expires=' + expiry.toUTCString()
document.cookie = name + '=' + value + ';' + expires + ';' + 'path=/'
}
function getCookie(name) {
var name = name + '='
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 false
}
// set cookie
setCookie('mycookie', '1', 365);
// get cookie
getCookie('mycookie');
getCookie('joe'); // returns false
Your best bet would be to spin up a localhost webserver (something like WAMP or MAMP or Mac should do the trick) and drop a cookie. Look at the domain in your browser and copy that.

Display popup once per browser session not working

I want to display a popup once in per browser session in a day. So I collect this below script from here. But this script dose bot display anything anytime. Please help me to solved it.
Note: without script popup display well for every page start. But I just want once for my site per browser session.
Cookie script:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
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);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie() {
var user = getCookie("ccname");
if (user != "") {
} else {
$(".socialbox").fadeIn();
$(".smallcontainers").fadeIn()
user = "mysocial";
setCookie("ccname", user, 1);
}
}

If statement only working when else is the case

The idea here is to create a sort of "EULA wall". For some reason, whenever I test this code if I don't have the cookie, it works wonderfully, the EULA pops up, the accept button pops up and the accept button gives me the cookie. However, when I have the cookie, nothing in the actual if part happens. I currently have three "commands" one that would bring up the button again (a visual debug of sorts) one that would pass text to a <p></p>, and one that would call a function that runs the open.window(); function:
</script>
<p id = "loc"></p>
<script>
function printButton(){
var btn = document.createElement("BUTTON");
var text = document.createTextNode("accept");
btn.appendChild(text);
btn.setAttribute("onclick", "setCookie('accept','yes',365)")
document.getElementById("loc").appendChild(btn);
}
</script>
<script>
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
location.reload();
}
</script>
<script>
function getCookie(cname) {
var name = cname + "=";
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);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}
</script>
<p id = "testingstuff"></p>
<script>
function checkCookie() {
var accept = getCookie("accept");
if (accept != "") {
newWindow();
printButton();
document.getElementById("testingstuff").innerHTML = "testing";
} else {
displayEULA();
printButton();
}
}
checkCookie();
</script>
<script>
function newWindow(){
window.open("http://google.com","_self");
}
</script>
</body>
</html>
Seems bizarre that this sort of thing would happen but maybe I'm just missing something obvious.

Execute javascript only once a week

I've got a question, im very new to javascript but i got this from the internet:
<script>
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
But i dont want to spam everyone this popup, so it only has to show 1 time every week on your pc, thought u can do this with a cookie. But im new to it so i cant get it working.
Someone that can help me out?
So if someone opens my page, show the popup. 2nd time he visits there is no popup, after 1 week the popup has to show again.
First create a function to set cookies:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
Then, a function to get a cookie:
function getCookie(cname) {
var name = cname + "=";
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);
if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
}
return "";
}
and finally, check if cookie is set or else do the work and set the cookie
function checkCookie() {
var lightbox = getCookie("lightbox");
if (lightbox === "") { // Cookie not set
lightbox_open();
setCookie("lightbox", "seen", 7);
}
}
Set a cookie that gets deleted after a week:
document.cookie = 'preventSpam;max-age=604800'; // 7 * 24 * 60 * 60
Then check whether the cookie exists
if (document.cookie) {
showSomePopup();
}
Beware: This is just a simplest possible demonstration. If you want to use cookies for more than this single use-case, you need to implement/import some kind of cookie getter/setter, as shown in documentation.

Categories

Resources