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

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>

Deja un comentario

Tu dirección de correo electrónico no será publicada.

*

code

nasa pic of the day
  • wordpress plugin for embedding github content

  • (N)o (A)(R)(P) (A)ttacks

  • some of my scripts for dayly use

  • android beacon position triangulation app

  • example of dynamic scrolling tabs and dynamic sliding tabs for android studio

  • script for changing your login screen to last nasa uploaded picture

  • (D)iablo (2) (g)ame (l)ist (s)niffer

  • wordpress plugin for a widget with the last nasa uploaded picture.

  • draw a star field in js moving in the desired direction

  • quadcopter made with arduino (arduino pro micro + modules)

  • unsorted things