En este post te mostraré una librería de JavaScript para guardar un carrito de compras en JavaScript del lado del cliente. Será una simple clase que encerrará el comportamiento y brindará funciones para todas las operaciones.

Como dice el título, se usará localStorage para guardar y recuperar los valores, de este modo no importa el lenguaje del lado del servidor, pues se usará el lado del cliente.

Por ahora te mostraré solo la librería/Clase, no su uso. Ya más adelante te traeré un ejemplo completo.

Funcionamiento

Básicamente se trabaja con un arreglo de JavaScript usando sus operaciones como push o splice. Luego, todo este arreglo es guardado en localStorage. Recuerda que con localStorage solo podemos manejar cadenas, así que antes de guardarlo se codifica como JSON.

Del mismo modo, al traerlo de vuelta, se decodifica el JSON y se convierte automáticamente en un arreglo de JavaScript válido. Esta operación se hace en el constructor, así no estamos leyendo de localStorage en cada movimiento.

Código de la clase

La clase se llama Carrito. Al instanciarse se puede pasar un parámetro opcional para indicar la clave que se usará al guardar el arreglo dentro de localStorage; por defecto es productos.

Ya después vemos varios métodos:

/*

  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
____________________________________
/ Si necesitas ayuda, contáctame en \
\ https://parzibyte.me               /
 ------------------------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||
Creado por Parzibyte (https://parzibyte.me).
------------------------------------------------------------------------------------------------
Si el código es útil para ti, puedes agradecerme siguiéndome: https://parzibyte.me/blog/sigueme/
Y compartiendo mi blog con tus amigos
También tengo canal de YouTube: https://www.youtube.com/channel/UCroP4BTWjfM0CkGB6AFUoBg?sub_confirmation=1
------------------------------------------------------------------------------------------------
*/class Carrito {
    constructor(clave) {
        this.clave = clave || "productos";
        this.productos = this.obtener();
    }

    agregar(producto) {
        if (!this.existe(producto.id)) {
            this.productos.push(producto);
            this.guardar();
        }
    }

    quitar(id) {
        const indice = this.productos.findIndex(p => p.id === id);
        if (indice != -1) {
            this.productos.splice(indice, 1);
            this.guardar();
        }
    }

    guardar() {
        localStorage.setItem(this.clave, JSON.stringify(this.productos));
    }

    obtener() {
        const productosCodificados = localStorage.getItem(this.clave);
        return JSON.parse(productosCodificados) || [];
    }

    existe(id) {
        return this.productos.find(producto => producto.id === id);
    }

    obtenerConteo() {
        return this.productos.length;
    }


}

Los importantes son pocos, como agregar que recibe un producto y lo agrega en caso de que no exista. También tenemos el método obtener que devuelve el arreglo de productos, y el método quitar que remueve el objeto del carrito de compras.

Las operaciones de guardado y lectura se hacen automáticamente. Por ejemplo, se lee de localStorage en el constructor, y se guarda en el método guardar. Este método no se debería invocar desde fuera de la clase, pues se invoca cuando se quita o agrega un elemento.

Esta librería supone que los productos son objetos y que entre todas sus propiedades tienen un id.

Conclusión

En los próximos artículos te mostraré cómo usar esta clase, aunque con lo explicado anteriormente ya puedes darte una idea. Igualmente eres libre de modificar el código, mejorarlo, etcétera.

Esto se puede integrar con Vue, Angular, React o cualquier framework del lado del cliente. De este modo almacenamos el carrito de compras en el navegador, sin meternos con sesiones o cosas externas del servidor.