Uso rápido de almacenamiento local en Vue

localStoragepuede ser una herramienta increíblemente útil para crear experiencias para aplicaciones, extensiones, documentación y una variedad de casos de uso. ¡Lo he usado personalmente en cada uno! En los casos en los que almacena algo pequeño para el usuario que no necesita conservarse permanentemente, localStoragees nuestro amigo. Combinémoslo localStoragecon Vue, que personalmente consideramos una experiencia para desarrolladores excelente y fácil de leer.

Ejemplo simplificado

Recientemente impartí un curso de Frontend Masters en el que creamos una aplicación de principio a fin con Nuxt. Estaba buscando una manera de dividir la forma en que lo estábamos construyendo en secciones más pequeñas y marcarlas a medida que avanzamos, ya que teníamos mucho que cubrir. localStorageFue una solución, ya que todos estaban siguiendo su propio progreso personalmente, y no necesariamente necesitaba almacenar toda esa información en algo como AWS o Azure.

Esto es lo último que estamos creando, que es una simple lista de tareas pendientes:

Almacenar los datos

Comenzamos estableciendo los datos que necesitamos para todos los elementos que queremos verificar, así como una matriz vacía para cualquier cosa que el usuario verificará.

export default {  data() {    return {      checked: [],      todos: [        "Set up nuxt.config.js",        "Create Pages",        // ...        ]     }   }}

También lo enviaremos a la página en la etiqueta de plantilla:

  div    fieldset      legend        What we're building      /legend      div v-for="todo in todos" :key="todo"        input          type="checkbox"          name="todo"          :id="todo"          :value="todo"          v-model="checked"        /       label :for="todo"{{ todo }}/label     /div   /fieldset /div

Montaje y observación

Actualmente, estamos respondiendo a los cambios en la interfaz de usuario, pero aún no los almacenamos en ningún lugar. Para almacenarlos, debemos decirle localStorage“oye, estamos interesados ​​en trabajar contigo”. Luego también debemos conectarnos a la reactividad de Vue para actualizar esos cambios. Una vez que el componente esté montado, usaremos el mountedenlace para seleccionar los elementos marcados en la lista de tareas pendientes y luego los analizaremos en JSON para que podamos almacenar los datos en localStorage:

mounted() {  this.checked = JSON.parse(localStorage.getItem("checked")) || []}

Ahora, vigilaremos esa propiedad en busca de cambios y, si algo se ajusta, ¡también checkedla actualizaremos!localStorage

watch: {  checked(newValue, oldValue) {    localStorage.setItem("checked", JSON.stringify(newValue));  }}

¡Eso es todo!

En realidad, eso es todo lo que necesitamos para este ejemplo. Esto solo muestra un pequeño caso de uso posible, ¡pero puedes imaginar cómo podríamos usarlo localStoragepara tantas experiencias personales y de rendimiento en la web!