localStorage es una nueva API de JavaScript en HTML5 que nos permite guardar datos en pares clave / valor en el navegador de un usuario. Es un poco como las cookies, excepto:
- Las cookies caducan y se borran mucho, localStorage es para siempre (hasta que se borre explícitamente).
- localStorage no se envía en las solicitudes HTTP, debe solicitarlo.
- Puede almacenar muchos más datos en localStorage que en cookies.
- La API para localStorage es increíblemente simple y fácil.
Si necesita ponerse más al día, recientemente hice un screencast de video en localStorage. Así es como funciona:
/* Set some data */
localStorage.setItem("key", "value");
/* Get some data */
localStorage.getItem("key");No se necesitan bibliotecas, eso es solo JavaScript. Si lo desea, puede usar Modernizr para probarlo con Modernizr.localstorage primero.
Bien, eso es todo lo geek, veamos algunos lugares en la web que podrían estar, deberían estar o lo están usando. Con suerte, esto generará algunas ideas para sus propios sitios web.
ESTÁ usando localStorage
Snapbird (una poderosa herramienta de búsqueda de Twitter) recuerda la transmisión de la última persona que buscó. Parece que lo más probable es que la próxima vez que regrese esté buscando a la misma persona y esto le ahorrará un segundo. De lo contrario, puede eliminarlo y reemplazarlo. Lo encuentro útil ya que normalmente intento encontrar mis propios tweets antiguos.
El evento Webbie Madness de este año tuvo una gran cuadrícula de votación al estilo March Madness donde se alentó a las personas a elegir a los ganadores en múltiples rondas. La primera ronda contó con 32 personas en 16 batallas. Los nombres de las personas estaban disfrazados. Me tomó un tiempo averiguar quién era quién y decidir por quién votar, y no fue algo que pudiera hacer en una “sesión”. Sugerí que guardaran los votos como la gente los hizo en localStorage, de esa forma podrías volver en cualquier momento y terminar. Como unos auténticos rufianes, ¡lo hicieron!
JSBin (por Remy Sharp, quien también hizo Snapbird, imagínate) te permite guardar tu plantilla HTML / JavaScript de inicio para que la próxima vez que vuelvas a usarla, puedas usar esa misma plantilla.
DEBE estar usando localStorage
Typekit tiene una herramienta Type Tester cuando visualiza una fuente en particular. Puede escribir su propio texto en el cuadro para ver cómo se verá en esa fuente. Desafortunadamente, cuando va a otra fuente, el texto personalizado que ingresó desaparece. Este sería un gran caso para localStorage. Cuando cambie el valor en esa área, guárdelo en localStorage y cargue ese valor cuando se cargue la página. Creo que sería un gran ahorro de tiempo, ya que creo que saltar para ver ese texto en varias fuentes es un caso de uso bastante común.
CSS Lint tiene una cuadrícula de casillas de verificación para las características que desea o no desea que CSS Lint busque cuando pruebe su CSS. Sería realmente bueno si esto usara localStorage para recordar qué configuración de casilla de verificación usó, por lo que si vuelve a cargar la página o regresa más tarde, es lo mismo. Entonces, si no le gusta la casilla de verificación “No usar ID”, puede desactivarla para siempre =).
Prácticamente cualquier sitio web con un formulario de inicio de sesión podría usar localStorage para mantener el nombre de usuario guardado. Entonces, cuando un usuario regresa, es un paso menos para que inicie sesión.
Zeldman.com tiene enlaces en el pie de página que le permiten alternar los colores utilizados en el sitio entre dos versiones. Guarda esto como una cookie, lo cual es genial, pero está sujeto a la fragilidad de las cookies. Cualquier sitio como este con opciones de estilo alternativas (por ejemplo, alternar el tamaño de la fuente) podría guardar esa información en localStorage y conservarla mejor.
MOR
Esta es la punta del iceberg. Estoy seguro de que las personas con mentes más orientadas a los desarrolladores pueden pensar en ideas mejores y más importantes para esto. ¿Guarda su lugar en un juego? ¿Almacenamiento en caché de activos? ¿Que más tienes?
Mucho más información de Mark Pilgrim.