{"id":596,"date":"2014-07-31T21:06:07","date_gmt":"2014-07-31T21:06:07","guid":{"rendered":"http:\/\/luisrodriguez.pe\/blog\/?p=596"},"modified":"2015-08-26T21:19:31","modified_gmt":"2015-08-26T21:19:31","slug":"ejemplo-de-localstorage-html5","status":"publish","type":"post","link":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/","title":{"rendered":"Ejemplo de LocalStorage HTML5"},"content":{"rendered":"

LocalStorage es una nueva implementacion del HTML5 \u00a0que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador. \u00a0Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estar\u00e1 ah\u00ed por que se guarda en alguna parte del disco duro.<\/p>\n

Trabajar con esta caracter\u00edstica del html5 no es nada complejo se mas si estas acostumbrado a usar array en javascript te sera muy facil y con esto nos olvidamos las cookies que a comparado de localstorage son tediosos y siempre estan pegadas a la peticiones http \u00a0 por ende viajan con su peso con la web. Pero su punto en contra que si alguien tiene acceso al browser del cliente podria obtener estas variables de localstorage.
\n\"\"<\/a><\/p>\n

google Chrome nos da un debug para poder estas variables y poder tener control de ellas entonces desde la aplicacion web podemos crear.<\/p>\n

Por ejemplo vamos a ponernos en un caso practico que tenemos un slider que va del 100% del ancho de la web en todos los contenidos y en monitores peque\u00f1os a primera vista en su navegador solo saldra el slider y tendria que scrolear para ver el contenido. Podemos plantear una soluci\u00f3n con localstorage que el slider tenga un boton que diga ocultar y hasta ahi lo pueden hacer hasta sin necesidad del localstorage pero si les digo que quiero que cuando visite otra pagina del sitio web tambien quiero que se respete el estado que le di al slider? osea el slider tendria estado (abierto y cerrado).
\nAl desarrollo.<\/p>\n

el css donde al slider lo colocamos en el top 100% y un boton que estara dentro del slider para hacer el cambio de estado
\n<\/code><\/p>\n\n

 \n   #slider<\/span>{<\/span>\n                width<\/span>:<\/span> 100%<\/span>;<\/span>\n                height<\/span>:<\/span> 300px<\/span>;<\/span>\n                position<\/span>:<\/span> absolute<\/span>;<\/span>\n                top<\/span>:<\/span>0px<\/span>;<\/span>\n                left<\/span>:<\/span>0px<\/span>;<\/span>\n                background<\/span>:<\/span>red<\/span>;<\/span>\n                display<\/span>:<\/span> block<\/span>;<\/span>\n            }<\/span>\n            #boton<\/span>{<\/span>\n                position<\/span>:<\/span> absolute<\/span>;<\/span>\n                top<\/span>:<\/span>300px<\/span>;<\/span>\n                height<\/span>:<\/span> 40px<\/span>;<\/span>\n                width<\/span>:<\/span> 40px<\/span>;<\/span>\n                left<\/span>:<\/span>0px<\/span>;<\/span>\n                background<\/span>:<\/span> yellow<\/span>;<\/span>\n                z-index<\/span>:<\/span> 2<\/span>;<\/span> \n                cursor<\/span>:<\/span>pointer<\/span>;<\/span>\n            }<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
el html y agregar la libreria jquery (no es necesario usar jquery para trabajar con localstorage)<\/p>\n\n
&lt; header id="slider" &gt;\r\n            &lt; div id="boton"&gt;subir&lt; \/div &gt;\r\n&lt; \/header &gt;\r\n&lt; script src="https:\/\/code.jquery.com\/jquery-git2.min.js"&gt;<\/pre><\/td><\/tr><\/table><\/div>\n\n
entonces esta es la base pero si recargamos la pagina siempre estara por defecto abierto y no esta tomando en cuenta el ultimo estado en que lo dejamos.<\/p>\n\n
$(<\/span>"#boton"<\/span>)<\/span>.on<\/span>(<\/span>"click"<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n                 \/*si esta en top 0 es que esta abierto el slider y debemos ocultarlo con -300 \n                   si no es 0 es que esta en -300 entonces quiere decir que esta oculta para mostrar debemos \n                   darle 0\n                 *\/<\/span>\n                 if<\/span> (<\/span>$(<\/span>"#slider"<\/span>)<\/span>.css<\/span>(<\/span>"top"<\/span>)<\/span>==<\/span>"0px"<\/span>)<\/span>\n                 {<\/span>\n                     $(<\/span>"#slider"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"top"<\/span>:-<\/span>300<\/span>}<\/span>)<\/span> \n                 }<\/span>\n                 else<\/span>\n                 {<\/span>\n                     $(<\/span>"#slider"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"top"<\/span>:<\/span>0<\/span>}<\/span>)<\/span> \n                 }<\/span>\n            }<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
Aqui aplicamos localstorage localStorage[\u00abestado\u00bb] y le damos un estado dependiendo a lo que hace el usuario.<\/p>\n\n
$(<\/span>"#boton"<\/span>)<\/span>.on<\/span>(<\/span>"click"<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span> \n                 if<\/span> (<\/span>$(<\/span>"#slider"<\/span>)<\/span>.css<\/span>(<\/span>"top"<\/span>)<\/span>==<\/span>"0px"<\/span>)<\/span>\n                 {<\/span>\n                     $(<\/span>"#slider"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"top"<\/span>:-<\/span>300<\/span>}<\/span>)<\/span> \n                     localStorage[<\/span>"estado"<\/span>]<\/span>=<\/span>"cerrado"<\/span>\n                 }<\/span>\n                 else<\/span>\n                 {<\/span>\n                     $(<\/span>"#slider"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"top"<\/span>:<\/span>0<\/span>}<\/span>)<\/span> \n                     localStorage[<\/span>"estado"<\/span>]<\/span>=<\/span>"abierto"<\/span>\n                 }<\/span>\n            }<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
y con este codigo ya tenemos este resultado<\/p>\n
\"\"<\/a><\/p>\n
y vemos que ya nos cargo una variable localstorage y si lo cerramos cambiamos el valor automaticamente.<\/p>\n
\"\"<\/a><\/p>\n
pero hasta ahora solo seteamos el valor del localstorage aun no lo estamos usando entonces agregamos las siguientes lineas de codigo.<\/p>\n\n
$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n                \/*si el valor no es undefined significa que la variable ya fue seteada con un valor*\/<\/span> \n                if<\/span> (<\/span>localStorage[<\/span>"estado"<\/span>]<\/span>!=<\/span>undefined<\/span>)<\/span>\n                {<\/span>\n                    \/*condicionamos el valor del estado para dar uns instruccion si cerrar o abrir*\/<\/span>\n                    switch<\/span>(<\/span>localStorage[<\/span>"estado"<\/span>]<\/span>)<\/span>\n                    {<\/span>\n                        case<\/span> 'cerrado'<\/span>:<\/span>\n                            $(<\/span>"#slider"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"top"<\/span>:-<\/span>300<\/span>}<\/span>)<\/span> \n                            break<\/span>;<\/span>\n                        case<\/span> 'abierto'<\/span>:<\/span>\n                            $(<\/span>"#slider"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"top"<\/span>:<\/span>0<\/span>}<\/span>)<\/span> \n                            break<\/span>;<\/span>    \n \n                    }<\/span>\n                }<\/span>\n \n            }<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
pues con esto ya tenemos funcional nuestro script igual les dejo el script aqui corriendo.
\ndemo en linea<\/a>
\narchivos fuentes<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"LocalStorage es una nueva implementacion del HTML5 \u00a0que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador. \u00a0Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estar\u00e1 ah\u00ed por que se guarda en alguna parte del disco[…]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,7,14],"tags":[54,22,17,55],"class_list":["post-596","post","type-post","status-publish","format-standard","hentry","category-html5","category-javascript","category-jquery","tag-html5-2","tag-javascript-2","tag-jquery-2","tag-localstorage"],"yoast_head":"\nEjemplo de LocalStorage HTML5<\/title>\n<meta name=\"description\" content=\"LocalStorage es una nueva implementacion del HTML5 que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador. Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estar\u00e1 ah\u00ed por que se guarda en alguna parte del disco duro.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ejemplo de LocalStorage HTML5\" \/>\n<meta property=\"og:description\" content=\"LocalStorage es una nueva implementacion del HTML5 que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador. Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estar\u00e1 ah\u00ed por que se guarda en alguna parte del disco duro.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Luis Rodriguez\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/luisrodriguez.pe\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-31T21:06:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-08-26T21:19:31+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png\" \/>\n<meta name=\"author\" content=\"Luis Rodriguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:site\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Rodriguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/\"},\"author\":{\"name\":\"Luis Rodriguez\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"headline\":\"Ejemplo de LocalStorage HTML5\",\"datePublished\":\"2014-07-31T21:06:07+00:00\",\"dateModified\":\"2015-08-26T21:19:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/\"},\"wordCount\":421,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png\",\"keywords\":[\"html5\",\"javascript\",\"jquery\",\"localstorage\"],\"articleSection\":[\"HTML5\",\"JAVASCRIPT\",\"Jquery\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/\",\"name\":\"Ejemplo de LocalStorage HTML5\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png\",\"datePublished\":\"2014-07-31T21:06:07+00:00\",\"dateModified\":\"2015-08-26T21:19:31+00:00\",\"author\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"description\":\"LocalStorage es una nueva implementacion del HTML5 que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador. Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estar\u00e1 ah\u00ed por que se guarda en alguna parte del disco duro.\",\"breadcrumb\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#primaryimage\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png\",\"contentUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png\",\"width\":656,\"height\":319},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/luisrodriguez.pe\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ejemplo de LocalStorage HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/\",\"name\":\"Blog Luis Rodriguez\",\"description\":\"Analytics Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\",\"name\":\"Luis Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"caption\":\"Luis Rodriguez\"},\"description\":\"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin\",\"sameAs\":[\"http:\/\/luisrodriguez.pe\"],\"url\":\"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ejemplo de LocalStorage HTML5","description":"LocalStorage es una nueva implementacion del HTML5 que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador. Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estar\u00e1 ah\u00ed por que se guarda en alguna parte del disco duro.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/","og_locale":"es_ES","og_type":"article","og_title":"Ejemplo de LocalStorage HTML5","og_description":"LocalStorage es una nueva implementacion del HTML5 que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador. Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estar\u00e1 ah\u00ed por que se guarda en alguna parte del disco duro.","og_url":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/","og_site_name":"Blog Luis Rodriguez","article_publisher":"https:\/\/www.facebook.com\/luisrodriguez.pe","article_published_time":"2014-07-31T21:06:07+00:00","article_modified_time":"2015-08-26T21:19:31+00:00","og_image":[{"url":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png","type":"","width":"","height":""}],"author":"Luis Rodriguez","twitter_card":"summary_large_image","twitter_creator":"@luizmirodriguez","twitter_site":"@luizmirodriguez","twitter_misc":{"Escrito por":"Luis Rodriguez","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#article","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/"},"author":{"name":"Luis Rodriguez","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"headline":"Ejemplo de LocalStorage HTML5","datePublished":"2014-07-31T21:06:07+00:00","dateModified":"2015-08-26T21:19:31+00:00","mainEntityOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/"},"wordCount":421,"commentCount":0,"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#primaryimage"},"thumbnailUrl":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png","keywords":["html5","javascript","jquery","localstorage"],"articleSection":["HTML5","JAVASCRIPT","Jquery"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/","url":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/","name":"Ejemplo de LocalStorage HTML5","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#primaryimage"},"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#primaryimage"},"thumbnailUrl":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png","datePublished":"2014-07-31T21:06:07+00:00","dateModified":"2015-08-26T21:19:31+00:00","author":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"description":"LocalStorage es una nueva implementacion del HTML5 que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador. Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estar\u00e1 ah\u00ed por que se guarda en alguna parte del disco duro.","breadcrumb":{"@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#primaryimage","url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png","contentUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/07\/debug-chrome.png","width":656,"height":319},{"@type":"BreadcrumbList","@id":"https:\/\/luisrodriguez.pe\/blog\/ejemplo-de-localstorage-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luisrodriguez.pe\/blog\/"},{"@type":"ListItem","position":2,"name":"Ejemplo de LocalStorage HTML5"}]},{"@type":"WebSite","@id":"https:\/\/luisrodriguez.pe\/blog\/#website","url":"https:\/\/luisrodriguez.pe\/blog\/","name":"Blog Luis Rodriguez","description":"Analytics Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c","name":"Luis Rodriguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","caption":"Luis Rodriguez"},"description":"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin","sameAs":["http:\/\/luisrodriguez.pe"],"url":"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/comments?post=596"}],"version-history":[{"count":15,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/596\/revisions"}],"predecessor-version":[{"id":856,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/596\/revisions\/856"}],"wp:attachment":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media?parent=596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/categories?post=596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/tags?post=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}