{"id":17733,"date":"2024-01-12T13:03:00","date_gmt":"2024-01-12T12:03:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=17733"},"modified":"2024-01-29T12:28:51","modified_gmt":"2024-01-29T11:28:51","slug":"explorando-el-local-storage-metodos-utiles-y-buenas-practicas","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/explorando-el-local-storage-metodos-utiles-y-buenas-practicas\/","title":{"rendered":"Explorando el Local Storage: M\u00e9todos \u00datiles y Buenas Pr\u00e1cticas"},"content":{"rendered":"\n

El localStorage es una herramienta esencial a la hora de aprender desarrollo web<\/a> y que permite a los desarrolladores guardar informaci\u00f3n de manera persistente en el navegador del usuario. <\/p>\n\n\n\n

Qu\u00e9 es localStorage<\/h2>\n\n\n\n
\n
\n

LocalStorage es una propiedad para acceder al objeto localStorage de almacenamiento web, que te permite guardar pares clave valor en el navegador. Los datos permanecen guardados entre las diferentes sesiones.<\/strong><\/p>\n\n\n\n

La parte interesante de esto es que los datos almacenados persisten<\/strong>, aunque recargues la p\u00e1gina o incluso si el navegador es reiniciado.<\/p>\n<\/div>\n\n\n\n

\n
\"Explorando<\/figure>\n<\/div>\n<\/div>\n\n\n\n

localStorage vs Cookies<\/h2>\n\n\n\n

Qu\u00e9 ventajas tiene esto respecto de las cookies:<\/p>\n\n\n\n

    \n
  • Al contrario que las cookies, el objeto no se env\u00eda al servidor<\/strong> en cada petici\u00f3n. Debido a esto, la informaci\u00f3n que podemos almacenar es mayor, hasta 5 MB por dominio.<\/li>\n\n\n\n
  • Otra cosa es que no se pueden manipular v\u00eda HTTP<\/strong> (mediante peticiones GET o POST), sino que debe ser a trav\u00e9s de JavaScript.<\/li>\n\n\n\n
  • El almacenamiento est\u00e1 vinculado al origen<\/strong>, es decir, si tienes dos subdominios diferentes, dos protocolos diferentes o dos puertos diferentes, los datos almacenados en localStorage ser\u00e1n distintos y no se compartir\u00e1n entre ellos. Esto proporciona un nivel adicional de seguridad y a\u00edsla los datos entre diferentes contextos de origen.<\/li>\n<\/ul>\n\n\n\n

    D\u00f3nde encontrar el localStorage en tu navegador<\/strong><\/h2>\n\n\n\n

    Por lo general en \u201cHerramientas para desarrolladores\u201d vamos a encontrar el local storage, en Chrome estar\u00e1 en la pesta\u00f1a de aplicaci\u00f3n:<\/p>\n\n\n\n

    \"ventana<\/figure>\n\n\n\n

    Y en Firefox en la de almacenamiento:<\/p>\n\n\n\n

    \"ventana<\/figure>\n\n\n\n

    Desde esta interfaz puedes a\u00f1adir y quitar elementos de manera manual, pero vamos a ver qu\u00e9 m\u00e9todos tenemos para poder hacerlo desde el c\u00f3digo que lo que interesa.<\/p>\n\n\n\n

    M\u00e9todos del localStorage<\/strong><\/h2>\n\n\n\n
      \n
    • SetItem<\/strong>: con una clave y un valor los a\u00f1adir\u00e1 al storage o actualizar\u00e1 el valor si ya existe. storage.setItem(clave, valor);<\/code><\/li>\n\n\n\n
    • GetItem<\/strong>: se le pasa una clave, y devuelve el valor correspondiente si est\u00e1 presente en el storage. var valor = storage.getItem(clave);<\/code><\/li>\n\n\n\n
    • RemoveItem:<\/strong> elimina la clave que se le pasa como atributo. storage.removeItem(clave);<\/code><\/li>\n\n\n\n
    • Clear<\/strong>: limpia todo el localStorage. localStorage.clear();<\/li>\n\n\n\n
    • Key<\/strong>: apunta al elemento en la posici\u00f3n, igual que si fuese un array. localStorage.key(i)<\/code><\/li>\n\n\n\n
    • Length<\/strong>: devuelve el n\u00famero de datos almacenados en el localStorage. localStorage.length<\/code><\/li>\n<\/ul>\n\n\n\n

      \u00bfEs seguro el localStorage?<\/strong><\/h2>\n\n\n\n

      Los datos en el localStorage no est\u00e1n cifrados<\/strong>, lo que significa que cualquier persona con acceso al navegador podr\u00eda ver y modificar esos datos almacenados si quisiera. Con un uso no adecuado, esto podr\u00eda exponer informaci\u00f3n personal que no queramos mostrar a otros. Adem\u00e1s, puede haber riesgo de inyecciones de c\u00f3digo (XSS – Cross-site scripting ).<\/p>\n\n\n\n

      En cuanto a esto, tenemos algunas buenas pr\u00e1cticas que podemos usar para evitar este tipo de cosas como aplicar la Pol\u00edtica de seguridad de contenido (CSP) en el header, para restringir los or\u00edgenes y tipos de scripts que se pueden ejecutar en nuestra p\u00e1gina web. Y, por otro lado, evitar algunos m\u00e9todos de Javascript que permitan inyecciones de HTML, como veremos en el ejemplo enseguida.<\/p>\n\n\n\n

      Probando el LocalStorage<\/strong><\/h2>\n\n\n\n

      Siempre y cuando tengas un dato en el localStorage, este ser\u00e1 compartido en el mismo origen (como hemos comentado en las ventajas respecto a las cookies).<\/p>\n\n\n\n

      Hagamos la prueba, entra en la consola y escribe:<\/p>\n\n\n\n

      localStorage.setItem('mensaje', 'hola');<\/code><\/pre>\n\n\n\n
      \"prueba<\/figure>\n\n\n\n
      Ve ahora a ver tu local storage, sal del navegador, o ci\u00e9rralo, reinicia ordenador, o abre otra pesta\u00f1a del mismo sitios, ver\u00e1s como el dato introducido persiste.<\/p>\n\n\n\n
      Ejecuta esto en consola para verlo si no quieres entrar a buscar el almacenamiento:<\/p>\n\n\n\n
      alert( localStorage.getItem('mensaje') );<\/code><\/pre>\n\n\n\n
      El dominio, puerto y protocolo debe ser el mismo y obtendremos el valor del storage.<\/p>\n\n\n\n
      Al igual que con los objetos, podemos acceder a localStorage como si fuera un objeto m\u00e1s, escribiendo:<\/p>\n\n\n\n
      localStorage.laKeyDelObjeto<\/code>, el ejemplo anterior: localStorage.mensaje= 'hola'<\/code><\/p>\n\n\n\n
      y tambi\u00e9n localStorage['mensaje']<\/code>.<\/p>\n\n\n\n
      No obstante, se recomienda usar los m\u00e9todos propios del localStorage, por una raz\u00f3n principal, y es que un evento se dispara al utilizar estos m\u00e9todos, cosa que no ocurre, cuando usamos la forma de los objetos.<\/p>\n\n\n\n
      Poner a prueba lo aprendido: Mini-proyecto<\/h2>\n\n\n\n
      Vamos a hacer ahora un peque\u00f1o proyecto<\/strong> \u2013una Lista de tareas- donde poner en pr\u00e1ctica el localstorage y ver c\u00f3mo se comporta:<\/p>\n\n\n\n
      Creamos un HTML sencillo con un input y un bot\u00f3n para enviar la tarea:<\/p>\n\n\n\n
      <div id=\"app\">\n    <input type=\"text\" id=\"taskInput\" placeholder=\"Agregar nueva tarea\" \/>\n    <button id=\"addButton\">Agregar Tarea<\/button>\n    <ul id=\"taskList\"><\/ul>\n  <\/div>\n\n<\/code><\/pre>\n\n\n\n
      Y ahora vamos a por el JavaScript:<\/p>\n\n\n\n
      Primero cargar el JavaScript una vez el DOM se haya cargado:<\/p>\n\n\n\n
      document.addEventListener('DOMContentLoaded', function () {}<\/code><\/pre>\n\n\n\n
      dentro vamos a identificar los elementos<\/strong> del DOM con los que vamos a interactuar:<\/p>\n\n\n\n
      const taskInput = document.getElementById('taskInput');\nconst taskList = document.getElementById('taskList');\nconst addButton = document.getElementById('addButton');<\/code><\/pre>\n\n\n\n
      vamos a a\u00f1adir un addEventListener<\/code><\/strong> al bot\u00f3n para guardar el texto en las tareas si ya hemos escrito algo:<\/p>\n\n\n\n
      addButton.addEventListener('click', function () {\n        const taskText = taskInput.value.trim();\n\n        if (taskText !== '') {\n          const newTask = { text: taskText };\n          \/\/ funci\u00f3n para a\u00f1adir tarea a la lista\n          \/\/ funci\u00f3n para actualizar el localStorage\n          taskInput.value = '';\n        }\n      });\n<\/code><\/pre>\n\n\n\n
      creamos las dos funciones para a\u00f1adir una tarea<\/strong> a la lista:<\/p>\n\n\n\n
      function addTaskToList(taskText) {\n          function addTaskToList(taskText) {\n          const taskItem = document.createElement(\"li\");\n          taskItem.className = \"taskItem\";\n\n          const taskSpan = document.createElement(\"span\");\n          taskSpan.textContent = taskText;\n          taskItem.appendChild(taskSpan);\n\n          const deleteButton = document.createElement(\"button\");\n          deleteButton.className = \"deleteButton\";\n          deleteButton.textContent = \"Eliminar\";\n          deleteButton.addEventListener(\"click\", function () {\n            taskItem.remove();\n            deleteTaskFromLocalStorage(taskText);\n          });\n          taskItem.appendChild(deleteButton);\n\n          taskList.appendChild(taskItem);\n        }\n        \n<\/code><\/pre>\n\n\n\n
      Y nos quedar\u00eda a\u00f1adir una funci\u00f3n que a\u00f1ade la tarea, y otra que las elimine:<\/p>\n\n\n\n
              \/\/ Funci\u00f3n para actualizar el almacenamiento local con las tareas actuales\n        function updateLocalStorage(newTask) {\n          const savedTasks = JSON.parse(localStorage.getItem(\"tasks\")) || [];\n          const updatedTasks = [...savedTasks, newTask];\n          localStorage.setItem(\"tasks\", JSON.stringify(updatedTasks));\n        }\n\n        \/\/ Funci\u00f3n para eliminar una tarea del almacenamiento local\n        function deleteTaskFromLocalStorage(taskText) {\n          const savedTasks = JSON.parse(localStorage.getItem(\"tasks\")) || [];\n          const updatedTasks = savedTasks.filter((task) => task.text !== taskText);\n          localStorage.setItem(\"tasks\", JSON.stringify(updatedTasks));\n        }\n<\/code><\/pre>\n\n\n\n
      Podr\u00edamos haber hecho la funci\u00f3n de a\u00f1adir la tarea usando el m\u00e9todo innerHTML de esta forma:<\/p>\n\n\n\n
              const taskItem = document.createElement('li');\n        taskItem.className = 'taskItem';\n\n        taskItem.innerHTML = `\n          <span>${taskText}<\/span>\n          <button class=\"deleteButton\">Eliminar<\/button>\n        `;\n\n        \/\/ Agregar evento para eliminar la tarea al hacer clic en el bot\u00f3n\n        const deleteButton = taskItem.querySelector('.deleteButton');\n        deleteButton.addEventListener('click', function () {\n          taskItem.remove();\n          deleteTaskFromLocalStorage(taskText);\n        });\n\n        taskList.appendChild(taskItem);\n      }\n\n<\/code><\/pre>\n\n\n\n
      Pero, haz la prueba y ejecuta el c\u00f3digo entero cambiando esto, y prueba a introducir una tarea con c\u00f3digo HTML, ver\u00e1s qu\u00e9 sorpresa.<\/p>\n\n\n\n