How to switch from a normal writable store to persisted?

[jasper-clarke]

I am trying to use persistent storage for one of my Svelte stores but I don't have enough knowledge to get it working.

Below is my current store setup, help to switch it to using persisted would be greatly appreciated!!

src/cart.ts

export const cartItems = writable<CartItem[]>([]);

export const addToCart = (id: string) => {
    let items = get(cartItems);
    let itemPosition = items.findIndex(
        (item) => { return item.id == id }
    )

    if (itemPosition !== -1) {
        cartItems.update(() => {
            let updatedItems = items.map( (item) => {
                if (item.id === id) {
                    return { ...item, quantity: item.quantity + 1 };
                }
                return item;
            });
            return updatedItems;
        })
    } else {
        cartItems.update(() => {
            return [ ...items, { id: id, quantity: 1 } ]
        })
    }
}

export const removeFromCart = (id: string) => {
    let items = get(cartItems);
    let itemPosition = items.findIndex(
        (item) => { return item.id == id }
    )

    if (items[itemPosition]?.quantity - 1 === 0) {
        items.splice(itemPosition, 1)
    }

    cartItems.update(() => {
        let updatedItems = items.map((item) => {
            if (item.id === id) {
                return { ...item, quantity: item.quantity -1 }
            }
            return item;
        });
        return updatedItems;
    })
}

src/app.d.ts

declare class CartItem {
    id: string
    quantity: number
}

[joshnuss]

Hi Jasper!

No worries, it's super easy to do.

First, install the svelte-persisted-store NPM package with your package manager:

pnpm install -D svelte-persisted-store

Then, import the package at the top of your file.

import { persisted } from 'svelte-persisted-store'

Now all you have to do is switch your code on line 1 from writable() to persisted().

Note: persisted() takes a key as the first parameter. This is the name that is for saving the data in local storage. You can use any name you'd like for the key.

---export const cartItems = writable<CartItem[]>([]);
+++export const cartItems = persisted<CartItem[]>('cart', []);

Now, if you open DevTools -> Application -> Local Storage, you should see the cart data.

I hope that helps! Let me know if you have any further questions

[jasper-clarke]

Ah ok thank you very much.
Just one more thing then, From what i know won't I need the cart on all pages if for example i want to have a cart icon with the number of items in the cart.
So what parts of my pages actually "need" the cart on them?

[joshnuss]

From what i know won't I need the cart on all pages

That a good point. In that case you should go with the second option I suggested. ie conditionaly loading the cart based on the browser flag.

That means the server-side rendering (SSR) can render a cart icon, just don't show the number of items. Put that in a conditional as I showed above.

So what parts of my pages actually "need" the cart on them

Depends on your site I guess. Usually the header, product page and cart pages need it. All can be rendered server-side without and then enriched on the client.

[jasper-clarke]

So the issue is still persistent with product not being initialised. When i globally disable SSR now when the page loads with local storage i get the same 'product' error as before.
I'll have to find a way to fix that.

[jasper-clarke]

Good news i have resolved the issue.
In productCard.svelte i very simply needed to move export let product to the top of the script!

[joshnuss]

Great! Glad you got it sorted