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
laresistenciadelbit/bats

some of my scripts for dayly use

laresistenciadelbit/wp_githubin

wordpress plugin for embedding github content

laresistenciadelbit/beacon

android beacon position triangulation app

laresistenciadelbit/androidTabs

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

laresistenciadelbit/login_space

script for changing your login screen to last nasa uploaded picture

laresistenciadelbit/narpa

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

laresistenciadelbit/d2gls

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

laresistenciadelbit/wp_nasapic

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

laresistenciadelbit/starfield

draw a star field in js moving in the desired direction

laresistenciadelbit/drone

quadcopter made with arduino (arduino pro micro + modules)