Arrays y Cookies en Jquery Yo tengo una extensión que ejecutaré en el navegador, un userscript, para Youtube. La funcción principal de esa extensión es:
Ocultar los videos de un feed mediante un boton y aquellos que ya fueron ocultados no mostrarlos en la próxima visita
-Añadir un boton al lado de cada video para ocultarlo del feed (hecho)
-Que se elimine del feed (hecho)
-Que añada ese video a una cookie (no hecho)
-Que compruebe los videos del array de la cookie (que añadimos anteriormente) y los oculte si efectivamente estan en el feed (esto lo tengo a medias) para que en la próxima visita los elimine.
Porque he intentado trabajar con cookies pero estoy muy verde, aunque debe ser fácil
El codigo:
Código:
Muy posiblemente, tenga errores en los conceptos, pido disculpas :) $(".time-created").html('<img style="float:right; margin-top:0.16cm;" src="http://spain.angloinfo.com/wp-content/themes/ai-v2/images/close_icon.gif">'); //Incrusta el boton para cerrar el video.
$(".time-created").click(function(){ //cuando hace click en el boton
$(this).parent().parent().parent().parent().fadeOut('slow'); //oculta la caja del video que se encuentra 4 niveles mas arriba
var youtubeLink = $(this).parent().parent().children(".feed-item-visual").children(".feed-item-visual-thumb").children().attr("href"); //Consigo el link del video del correspondiente boton que cerré
//Aqui tambien debería ir la funccion para añadir la variable youtubeLink a una cookie (ej. videosEliminados)
});
/* estaría la variable videosEliminados que contiene el array y está en una cookie */
$( 'a.title' ).each(function(){ //recorro todos los a.title
var a = $(this);
var url = a.attr('href');
$.each($(videosEliminados), function(){//recorro todo el array (debería ser traido por la cookie)
if( url == this ) a.parent().parent().parent().parent().parent().remove(); //elimino aquellos videos que esten en el array de la cookie
});
});
Como obviamente no estais trabajando en el mismo ejemplo os pongo el codigo de Youtube en el que trabajo (variando URLs y titulos) logicamente.
Código HTML:
<li class="feed-item-container"> <div class="feed-item upload"> <div class="feed-item-content"> <h3 class="feed-item-title"> <span class="feed-item-author"> <a href="/user/GyMasESP?feature=g-u" class="yt-user-photo "> <span class="video-thumb ux-thumb ux-thumb-profile-24"><span class="clip"><span class="profile-centering-wrap"><img src="http://i2.ytimg.com/i/u-DWpqqeOq1y83EHAMupeg/1.jpg?v=de2376" alt="GyMasESP" data-thumb="http://i2.ytimg.com/i/u-DWpqqeOq1y83EHAMupeg/1.jpg?v=de2376" data-group-key="thumb-group-0"></span></span></span> </a> </span> <span class="feed-item-owner"> <a href="/user/GyMasESP?feature=g-u" class="yt-user-name " dir="ltr"> GyMasESP </a> </span> ha subido vídeos. <span class="time-created">hace 24 minutos</span> </h3> <div class="feed-item-visual"> <div class="feed-item-visual-thumb"> <a class="ux-thumb-wrap contains-addto" href="/watch?v=P018gx3UYJ8&feature=g-u"> <span class="video-thumb ux-thumb ux-thumb-288 "><span class="clip"><img src="//i1.ytimg.com/vi/P018gx3UYJ8/hqdefault.jpg" alt="Miniatura " data-thumb="//i1.ytimg.com/vi/P018gx3UYJ8/hqdefault.jpg" data-group-key="thumb-group-0"></span></span> <span class="video-time">12:51</span> <button type="button" class="addto-button short video-actions yt-uix-button yt-uix-button-short" onclick=";return false;" data-button-menu-action="yt.www.lists.addto.toggleMenu" data-button-menu-id="shared-addto-menu" data-video-ids="P018gx3UYJ8" data-feature="thumbnail" role="button"><img class="yt-uix-button-icon yt-uix-button-icon-addto" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""><span class="yt-uix-button-content"><span class="addto-label">Añadir a</span> </span><img class="yt-uix-button-arrow" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""></button> </a> </div> <div class="feed-item-visual-content"> <div class="feed-item-visual-description"> <h4><a class="title" href="/watch?v=P018gx3UYJ8&feature=g-u" dir="ltr">Jurassic Park Capitulo 1 Walkthrough en Español!!!</a></h4> <div class="description" dir="ltr"> <p>Con este capitulo, comienza la serie de Jurassic park! Iré subiendo videos del modo historia poquito a poco. Perdon si se ve borroso pero el Pro pr...</p> </div> </div> <p class="metadata"> <a href="/user/GyMasESP?feature=g-u" class="yt-user-name " dir="ltr"> GyMasESP </a> <span class="view-count"> Visto 1 veces </span> </p> </div> </div> </div> </div> </li>
Código HTML:
<li class="feed-item-container"> <div class="feed-item upload"> <div class="feed-item-content"> <h3 class="feed-item-title"> <span class="feed-item-author"> <a href="/user/xAlexBY11?feature=g-u" class="yt-user-photo "> <span class="video-thumb ux-thumb ux-thumb-profile-24"><span class="clip"><span class="profile-centering-wrap"><img src="http://i1.ytimg.com/i/h715KhLM7vbOwozSXLWI_w/1.jpg?v=bf7416" alt="xAlexBY11" data-thumb="http://i1.ytimg.com/i/h715KhLM7vbOwozSXLWI_w/1.jpg?v=bf7416" data-group-key="thumb-group-0"></span></span></span> </a> </span> <span class="feed-item-owner"> <a href="/user/xAlexBY11?feature=g-u" class="yt-user-name " dir="ltr"> xAlexBY11 </a> </span> ha subido vídeos. <span class="time-created">hace 28 minutos</span> </h3> <div class="feed-item-visual"> <div class="feed-item-visual-thumb"> <a class="ux-thumb-wrap contains-addto" href="/watch?v=R_eSAbIjLOg&feature=g-u"> <span class="video-thumb ux-thumb ux-thumb-288 "><span class="clip"><img src="//i3.ytimg.com/vi/R_eSAbIjLOg/hqdefault.jpg" alt="Miniatura " data-thumb="//i3.ytimg.com/vi/R_eSAbIjLOg/hqdefault.jpg" data-group-key="thumb-group-0"></span></span> <span class="video-time">13:47</span> <button type="button" class="addto-button short video-actions yt-uix-button yt-uix-button-short" onclick=";return false;" data-button-menu-action="yt.www.lists.addto.toggleMenu" data-button-menu-id="shared-addto-menu" data-video-ids="R_eSAbIjLOg" data-feature="thumbnail" role="button"><img class="yt-uix-button-icon yt-uix-button-icon-addto" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""><span class="yt-uix-button-content"><span class="addto-label">Añadir a</span> </span><img class="yt-uix-button-arrow" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""></button> </a> </div> <div class="feed-item-visual-content"> <div class="feed-item-visual-description"> <h4><a class="title" href="/watch?v=R_eSAbIjLOg&feature=g-u" dir="ltr">Live Battlefield 3 | Sarinha,Willyrex & aLexBY11 | Asalto</a></h4> <div class="description" dir="ltr"> <p>Aqui un video live copn sara y willy espero que os guste..he aqui el punto de vista de willy:</p> <p><a href="http://www.youtube.com/watch?v=cjYG5Vn219A&feature=feedf" target="_blank" title="http://www.youtube.com/watch?v=cjYG5Vn219A&feature=feedf" rel="nofollow" dir="ltr" class="yt-uix-redirect-link">http://www.youtube.com/watc...</a></p> </div> </div> <p class="metadata"> <a href="/user/xAlexBY11?feature=g-u" class="yt-user-name " dir="ltr"> xAlexBY11 </a> <span class="view-count"> Visto 310 veces </span> </p> </div> </div> </div> </div> </li>
Intenté utilizar esta funcion para guardar y recuperar arrays en una cookie de manera sencilla pero no me funcionó:
Código:
(http://stackoverflow.com/questions/1...-jquery-cookie) //This is not production quality, its just demo code.
var cookieList = function(cookieName) {
//When the cookie is saved the items will be a comma seperated string
//So we will split the cookie by comma to get the original array
var cookie = $.cookie(cookieName);
//Load the items or a new array if null.
var items = cookie ? cookie.split(/,/) : new Array();
//Return a object that we can use to access the array.
//while hiding direct access to the declared items array
//this is called closures see http://www.jibbering.com/faq/faq_notes/closures.html
return {
"add": function(val) {
//Add to the items.
items.push(val);
//Save the items to a cookie.
//EDIT: Modified from linked answer by Nick see
// http://stackoverflow.com/questions/3387251/how-to-store-array-in-jquery-cookie
$.cookie(cookieName, items.join(','));
},
"clear": function() {
items = null;
//clear the cookie.
$.cookie(cookieName, null);
},
"items": function() {
//Get all the items.
return items;
}
}
}
