Show hide javascript cookie - javascript

function showhide() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = 'table-row'; // set to table-row instead of an empty string
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
I have this working javascript function to hide a row in a table - like this
<tr id="hidethis" style="display:table-row;">
It works fine but i want to use cookies to remember which option user chose. I cant figure out how to properly set cookies, some advice would be much appreciated.

Try this:
You need to store the value in cookies and read those values on DOMContentLoaded event ad set your style accordingly
Reference used to create and read cookies values
var createCookie = function(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(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
document.addEventListener('DOMContentLoaded', function() {
var cookieVal = getCookie('display');
if (cookieVal) {
document.getElementById("hidethis").style.display = cookieVal;
}
});
function showhide() {
if (document.getElementById("hidethis").style.display == 'none') {
document.getElementById("hidethis").style.display = 'table-row'; // set to table-row instead of an empty string
createCookie('display', 'table-row', 365);
} else {
document.getElementById("hidethis").style.display = 'none';
createCookie('display', 'none', 365);
}
}
<table>
<tr id="hidethis" style="display:table-row;">
</table>

Related

Javascript: if something is in URL set cookie

I have a problem. I need set cookie, when in the URL is "pecan", and text will be "do 30min". If in URL isn't "pecan" or cookie expire text will be "nad 30 min".
Cookie expire in 30min (this is 1/48).
I have this code:
<script type="text/javascript">
if(window.location.href.indexOf('pecan') != -1)
{
Cookies.set('ent_afil', 'one', { expires: 1/48 });
}
if (Cookies.get('ent_afil') == 'one')
{
document.write('do 30min');
}
else {
document.write('nad 30min');
}
</script>
But still no function.
Where is mistake?
Thank you.
Pavel
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
if(window.location.href.indexOf('pecan') != -1)
{
var now = new Date();
var minutes = 30;
now.setTime(now.getTime() + (minutes * 60 * 1000));
cookievalue ='one'+ ";"
document.cookie="ent_afil=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
<!--document.write ("Setting Cookies : " + "name=" + document.cookie );-->
}
var value=getCookie('ent_afil')
if(value == 'one')
{
document.write('do 30min');
}
else {
document.write('nad 30min');
}

Javascript - Set a Browser Cookie

When a user click on a button it would take them to a link but before they go to that link, the cookie will need to be set to either English (EN) or French (FR). I got an example here:
http://www.quirksmode.org/js/cookies.html
but for some reason, it's not reading in the cookie and I'm not sure where I'm going wrong.
This is what I have:
<!DOCTYPE html>
<html>
<body>
<p>This is for the Browser Cookies.</p>
<button onclick="EN_Cookie()">English Link</button> <button onclick="FR_Cookie()">French Link</button>
<script>
function EN_Cookie() {
setCookie("SMDCookie","EN",7);
//location.href = 'https://google.com';
}
function FR_Cookie() {
setCookie("SMDCookie","FR",7);
//location.href = 'https://google.com';
}
function setCookie(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=/";
}
</script>
</body>
</html>
Any suggestions??
I reviewed your code and found your set cookie function is correct.
May be your getCookie not working, i am sharing get cookie function:
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 "";
}
Here are functions you can use for creating and retrieving cookies
function createCookie(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(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
Copied from How do I create and read a value from cookie with javascript?

How to save selected option to cookie in JavaScript for this example?

I want to store selected option in cookie via javascript
This is my code
var prevVal;
$("#paragraphSpaceOPtion").on("change",function(){
var val = $(this).find('option:selected').val();
$(".container-h div").text(`${val}`);
$(".fancybox-container").hide();
$("body").removeClass('compensate-for-scrollbar');
$(".footer-phone").text(`${val}`);
prevVal = val;
});
<select name="number" id="paragraphSpaceOPtion">
<option class="option-1" value="">Your sity</option>
<option class="option-1" value="city1">Paris</option>
<option class="option-2" value="London">London</option>
</select>
Here are functions you can use for creating and retrieving cookies.
var createCookie = function(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(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
So for your example, you can use createCookie('myvalue', val, 7) to save value for one week.

javascript- site cookies are not deleted

I am saving and restoring cookies using JavaScript in my website and I encountered an issue where I cannot delete those cookies.
I tries deleting then in code and also by clearing chrome history (from the beginning of time). I have red written posts and tried all sort of things but nothing fixed it for me.
here's my code that handles the cookies:
var createCookie = function (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(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
function deleteCookie(name) {
createCookie(name, "", -1);
}
after deleting chorme history, I execute this line of code :
var cookieHdrStr = getCookie("cart_header");
and I expectcookieHdrStr to be null/undefined but instead it restores the last cookie I saved.
I found what was wrong...
It turns out I had a line of code I wasn't aware of:
window.onbeforeunload = function () { saveDocumentCookie(); }
whenever unloading the page it was saving the cookies, so even when I deleted them and pressed f5 to refresh the page, before refreshing it was saving cookies.

Popup cookie once per browser session

I have a very simple popup, I would like to set a cookie, so when the visitor visits the page / category for the first time he will be able to see the popup and if he navigates out of the page and comes back, the popup won't appear until he ends the session (closes the browser). Thanks!
<script type="text/javascript">
var link;
var element;
t = setTimeout(openPopUp, 3000);
function openPopUp() {
element = document.getElementById("background");
element.style.display = "block";
element = document.getElementById("popup");
element.style.display = "block";
}
function closePopUp() {
element = document.getElementById("popup");
element.style.display = "none";
element = document.getElementById("background");
element.style.display = "none";
}
</script>
Edit: From comments:
var createCookie = Openpopup(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (60 * 1000));
expires = ";
expires = " + date.toGMTString();
} else {
expires = "";
}
document.cookie = name + "=" + value + expires + ";
path=/";
}
Something in the like (untested code):
var link;
// ....
if(getCookie("was_here_before")=="") {
setTimeout(openPopUp, 3000);
createCookie("was_here_before", "yes", 1);
}
// ....
// these are from SO answer in first comment by Sverri M. Olsen
// [ http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie ]
function createCookie(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(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
// ....
function openPopUp(url) {
var element;
link = url; // don't know what this is for
element = document.getElementById("background");
element.style.display = "block";
element = document.getElementById("popup");
element.style.display = "block";
}
function closePopUp() {
var element;
element = document.getElementById("popup");
element.style.display = "none";
element = document.getElementById("background");
element.style.display = "none";
}

Categories

Resources