Con Web Storage<\/strong>, las aplicaciones web pueden almacenar datos localmente dentro del navegador del usuario.<\/p>\n\n\n\n Antes de HTML5, los datos de la aplicaci\u00f3n ten\u00edan que almacenarse en cookies<\/strong>, incluidas en cada solicitud del servidor. Web Storage<\/strong> es m\u00e1s seguro y se pueden almacenar grandes cantidades de datos localmente, sin afectar el rendimiento del sitio web.<\/p>\n\n\n\n A diferencia de las cookies<\/strong>, el l\u00edmite de almacenamiento es mucho mayor (al menos 5 MB) y la informaci\u00f3n nunca se transfiere al servidor.<\/p>\n\n\n\n Web Storage<\/strong> es por origen (por dominio y protocolo). Todas las p\u00e1ginas, desde un origen, pueden almacenar y acceder a los mismos datos.<\/p>\n\n\n\n HTML provee dos objetos para almacenamiento de datos en el cliente<\/p>\n\n\n\n Antes de usar Web Storage<\/strong>, comprueba la compatibilidad del navegador con localStorage<\/em> <\/strong>y sessionStorage<\/em><\/strong>:<\/p>\n\n\n\n El objeto localStorage<\/em> <\/strong>almacena los datos sin fecha de caducidad. Los datos no se eliminar\u00e1n cuando se cierre el navegador y estar\u00e1n disponibles al d\u00eda, semana o a\u00f1o siguiente.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n El ejemplo anterior tambi\u00e9n podr\u00eda escribirse as\u00ed:<\/p>\n\n\n\n La sintaxis para eliminar el elemento localStorage \u00ablastname\u00bb es la siguiente:<\/p>\n\n\n\n Nota<\/strong>: Los pares de nombre\/valor siempre se almacenan como cadenas. \u00a1Recuerda convertirlos a otro formato cuando sea necesario!<\/p>\n<\/blockquote>\n\n\n\n El siguiente ejemplo cuenta el n\u00famero de veces que un usuario ha hecho clic en un bot\u00f3n. En este c\u00f3digo, la cadena de valor se convierte en un n\u00famero para poder aumentar el contador.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n El objeto sessionStorage<\/em> <\/strong>es igual al objeto localStorage<\/em><\/strong>, excepto que almacena los datos de una sola sesi\u00f3n. Los datos se eliminan cuando el usuario cierra la pesta\u00f1a espec\u00edfica del navegador.<\/p>\n\n\n\n El siguiente ejemplo cuenta la cantidad de veces que un usuario ha hecho clic en un bot\u00f3n en la sesi\u00f3n actual.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Que es Web Storage? Con Web Storage, las aplicaciones web pueden almacenar datos localmente dentro del navegador del usuario. Antes de HTML5,…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":66,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-288","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Que es Web Storage? Con Web Storage, las aplicaciones web pueden almacenar datos localmente dentro del navegador del usuario. Antes de HTML5,...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=288"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/288\/revisions"}],"predecessor-version":[{"id":290,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/288\/revisions\/290"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Objetos HTML Web Storage<\/h2>\n\n\n\n
\n
if (typeof(Storage) !== \"undefined\") {\n \/\/ Code for localStorage\/sessionStorage.<\/em>\n} else {\n \/\/ Sorry! No Web Storage support..\n}<\/pre>\n\n\n\nEl objeto localStorage<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n\n<\/head>\n<body>\n\t<div id=\"result\"><\/div>\n\t\n\t<script>\n\t\/\/ \tCHECKEAR SI EL NAVEGADOR SOPORTA WEB STORAGE\n\tif(typeof(Storage) !=\"undefined\"){\n\t\t\/\/ ALMACENA\n\t\tlocalStorage.setItem(\"lastname\", \"Paredes\");\n\t\t\/\/ RECUPERA\n\t\tdocument.getElementById(\"result\").innerHTML =\n\t\tlocalStorage.getItem(\"lastname\");\n\t} else {\n\t\tdocument.getElementById(\"result\").innerHTML =\n\t\t\"Lo sentimos, tu navegador no soporta Web Storage\"\n\t}\n\t<\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\nEjm explicado<\/h2>\n\n\n\n
\n
\/\/ Store\nlocalStorage.lastname = \"Smith\";\n\/\/ Retrieve\ndocument.getElementById(\"result\").innerHTML = localStorage.lastname;<\/pre>\n\n\n\n
localStorage.removeItem(\"lastname\");<\/pre>\n\n\n\n
\n
<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<script>\n\tfunction clickCounter(){\n\t\tif(typeof(Storage) !==\"undefined\"){\n\t\t\tif(localStorage.clickcount){\n\t\t\t\tlocalStorage.clickcount = Number(localStorage.clickcount)+1;\n\t\t\t}else{\n\t\t\t\tlocalStorage.clickcount = 1;\n\t\t\t} \n\t\t\tdocument.getElementById(\"result\").innerHTML = \"Has hecho clic en el bot\u00f3n \" \n\t\t\t+ localStorage.clickcount + \" vez (veces)\";\n\t\t}else{\n\t\t\tdocument.getElementById(\"result\").innerHTML = \"Lo sentimos, tu navegador no soporta localStorage\";\n\t\t}\n\t}\n<\/script>\n<\/head>\n<body>\n<p><button onclick=\"clickCounter()\" type=\"button\">Haz clic<\/button><\/p>\n<div id=\"result\"><\/div>\n<p>Haz clic en el bot\u00f3n para incrementar el contador<\/p>\n<p>Cierra la ventana y prueba otra vez, y el contador seguir\u00e1 contando\n (si no se resetea)<\/p>\n<\/body>\n<\/html><\/pre>\n\n\n\nEl objeto sessionStorage<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<script>\nfunction clickCounter() {\nif (typeof(Storage) !== \"undefined\") {\nif (sessionStorage.clickcount) {\nsessionStorage.clickcount = Number(sessionStorage.clickcount)+1;\n} else {\nsessionStorage.clickcount = 1;\n}\ndocument.getElementById(\"result\").innerHTML = \"You have clicked the button \" \n+ sessionStorage.clickcount + \" time(s) in this session.\";\n} else {\ndocument.getElementById(\"result\").innerHTML = \"Sorry, your browser does not support web storage...\";\n}\n}\n<\/script>\n<\/head>\n<body>\n\n<p><button onclick=\"clickCounter()\" type=\"button\">Click me!<\/button><\/p>\n<div id=\"result\"><\/div>\n<p>Click the button to see the counter increase.<\/p>\n<p>Close the browser tab (or window), and try again, and the counter is reset.<\/p>\n\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"