Cosas que he aprendido al montar el blog (VII) cookies en javascript y php

octubre 20, 2018mayo 1, 2021 o_o 0 comentarios

Otra cosa que aprendí al hacer el blog es el manejo simple de cookies.

Para esta plantilla diseñé un botón que permite cambiar el estilo de
claro a oscuro y viceversa.

Pero no vamos a estar pinchando por cada página que carguemos.
Por lo que cuando pulsemos una vez el botón, se almacenará en una cookie.
De esta manera al recargar la página, ésta sabrá que habíamos pulsado
la preferencia de querer el tema claro u oscuro.

En mi caso genero la cookie con javascript al pulsar el botón con esta función:

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.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

y esta llamada a la función:

createCookie(«theme_style»,»clear»,7);

o esta otra si pulsamos cuando queremos cambiar de claro a oscuro:

createCookie(«theme_style»,»dark»,7);

Y por último al cargar otra página, cuando el php va a cargar el estilo oscuro, (el cual está activado por defecto) le digo que primero vea si tenemos una cookie con un valor que no sea clear, y solo entonces le dejamos cargar el estilo oscuro.

if ( get_theme_mod( ‘colormag_color_skin_setting’, ‘white’ ) == ‘dark’ && $_COOKIE[‘theme_style’]!=’clear’)

En resumen…

>Cookies con javascript:

FUNCIONES

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.toUTCString();
    }
    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 eraseCookie(name) {
    document.cookie = name+'=; Max-Age=-99999999;';
}

LLAMADAS

-Generar cookie:

setCookie(‘ppkcookie’,’testcookie’,7);

-Leer cookie:

var x = getCookie(‘ppkcookie’); if (x) { [do something with x] }

>Cookies con php:

-Generar cookie:

$dias=7; setcookie(‘nombre_de_variable’,’contenido_de_variable’,time() + ($dias * 86400 ));

-Leer cookie:

echo $_COOKIE[‘first_name’];

****EDIT

Al final lo terminé haciendo todo en javascript, ya que al leer la cookie de php no cargaba el estilo oscuro si lo teníamos desactivado, y al pulsar el botón no se cargaría hasta que la página no fuese recargada.
De esta manera puede pasar de un estilo a otro sin recargar la página.

-Código completo:

<?php	//boton que cambia de estilo claro a oscuro
if ( !defined('ABSPATH') ) return;

if( isset($_COOKIE['theme_style']) && $_COOKIE['theme_style']=='clear')
  $check_switch='checked';
else
  $check_switch='';
?>

<div id="myswitchdiv">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0D%0A%23myswitchdiv%7B%0D%0A%09position%3Aabsolute%3B%0D%0A%09left%3A89%25%3B%0D%0A%09top%3A%2010px%3B%0D%0A%7D%0D%0A%40media%20screen%20and%20(max-width%3A%20600px)%20%7B%0D%0A%09%23myswitchdiv%7B%0D%0A%09%09left%3A85%25%3B%0D%0A%09%7D%0D%0A%7D%0D%0A.onoffswitch%20%7B%0D%0A%20%20%20%20position%3A%20relative%3B%20width%3A%2059px%3B%0D%0A%20%20%20%20-webkit-user-select%3Anone%3B%20-moz-user-select%3Anone%3B%20-ms-user-select%3A%20none%3B%0D%0A%7D%0D%0A.onoffswitch-checkbox%20%7B%0D%0A%20%20%20%20display%3A%20none%3B%0D%0A%7D%0D%0A.onoffswitch-label%20%7B%0D%0A%20%20%20%20display%3A%20block%3B%20overflow%3A%20hidden%3B%20cursor%3A%20pointer%3B%0D%0A%20%20%20%20height%3A%2023px%3B%20padding%3A%200%3B%20line-height%3A%2023px%3B%0D%0A%20%20%20%20border%3A%202px%20solid%20%231F7499%3B%20border-radius%3A%2023px%3B%0D%0A%20%20%20%20background-color%3A%20%23BFBFBF%3B%0D%0A%20%20%20%20transition%3A%20background-color%200.3s%20ease-in%3B%0D%0A%7D%0D%0A.onoffswitch-label%3Abefore%20%7B%0D%0A%20%20%20%20content%3A%20%22%22%3B%0D%0A%20%20%20%20display%3A%20block%3B%20width%3A%2023px%3B%20margin%3A%200px%3B%0D%0A%20%20%20%20background%3A%20%23E8E8E8%3B%0D%0A%20%20%20%20position%3A%20absolute%3B%20top%3A%200%3B%20bottom%3A%200%3B%0D%0A%20%20%20%20right%3A%2034px%3B%0D%0A%20%20%20%20border%3A%202px%20solid%20%231F7499%3B%20border-radius%3A%2023px%3B%0D%0A%20%20%20%20transition%3A%20all%200.3s%20ease-in%200s%3B%20%0D%0A%7D%0D%0A.onoffswitch-checkbox%3Achecked%20%2B%20.onoffswitch-label%20%7B%0D%0A%20%20%20%20background-color%3A%20%23289DCC%3B%0D%0A%7D%0D%0A.onoffswitch-checkbox%3Achecked%20%2B%20.onoffswitch-label%2C%20.onoffswitch-checkbox%3Achecked%20%2B%20.onoffswitch-label%3Abefore%20%7B%0D%0A%20%20%20border-color%3A%20%23289DCC%3B%0D%0A%7D%0D%0A.onoffswitch-checkbox%3Achecked%20%2B%20.onoffswitch-label%3Abefore%20%7B%0D%0A%20%20%20%20right%3A%200px%3B%20%0D%0A%7D%0D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<div class="onoffswitch">
    <input type="checkbox" onchange='handleChange(this);' name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" <?=$check_switch?>>
    <label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0D%0Afunction%20handleChange(cb)%20%7B%0D%0A%20%20if(cb.checked%20%3D%3D%20true)%7B%0D%0A%20%20%20document.body.classList.remove(%22dark-skin%22)%3B%0D%0A%20%20%20document.body.style.color%3D%22%23444444%22%3B%0D%0A%20%20%20createCookie(%22theme_style%22%2C%22clear%22%2C7)%3B%20%2F%2F%20%3C-%20%0D%0A%20%20%7Delse%7B%0D%0A%20%20%20document.body.classList.add(%22dark-skin%22)%3B%0D%0A%20%20%20document.body.style.color%3D'%23cccccc'%3B%0D%0A%20%20%20createCookie(%22theme_style%22%2C%22dark%22%2C7)%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A%0D%0Afunction%20createCookie(name%2Cvalue%2Cdays)%20%7B%0D%0A%20%20%20%20var%20expires%20%3D%20%22%22%3B%0D%0A%20%20%20%20if%20(days)%20%7B%0D%0A%20%20%20%20%20%20%20%20var%20date%20%3D%20new%20Date()%3B%0D%0A%20%20%20%20%20%20%20%20date.setTime(date.getTime()%20%2B%20(days*24*60*60*1000))%3B%0D%0A%20%20%20%20%20%20%20%20expires%20%3D%20%22%3B%20expires%3D%22%20%2B%20date.toUTCString()%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20document.cookie%20%3D%20name%20%2B%20%22%3D%22%20%2B%20value%20%2B%20expires%20%2B%20%22%3B%20path%3D%2F%22%3B%0D%0A%7D%0D%0Afunction%20getCookie(name)%20%7B%0D%0A%20%20%20%20var%20nameEQ%20%3D%20name%20%2B%20%22%3D%22%3B%0D%0A%20%20%20%20var%20ca%20%3D%20document.cookie.split('%3B')%3B%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%20%3C%20ca.length%3Bi%2B%2B)%20%7B%0D%0A%20%20%20%20%20%20%20%20var%20c%20%3D%20ca%5Bi%5D%3B%0D%0A%20%20%20%20%20%20%20%20while%20(c.charAt(0)%3D%3D'%20')%20c%20%3D%20c.substring(1%2Cc.length)%3B%0D%0A%20%20%20%20%20%20%20%20if%20(c.indexOf(nameEQ)%20%3D%3D%200)%20return%20c.substring(nameEQ.length%2Cc.length)%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20return%20null%3B%0D%0A%7D%0D%0A%0D%0Aif%20(getCookie('theme_style')%3D%3D'clear')%0D%0A%7B%0D%0A%09document.body.classList.remove(%22dark-skin%22)%3B%0D%0A%09document.body.style.color%3D%22%23444444%22%3B%0D%0A%7D%0D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</div>

>Cookies con javascript:

>Cookies con php:

Deja una respuesta Cancelar la respuesta