Local Storage - How to create a "shortlist" or "wish list"?

I want my users to be able to browse my store and “add to favourites” for later viewing …

What’s the best approach for doing this, without the need for saving to a DB?

I have tried creating an Array in the local storage manager, but cannot seem to get more than one item into the array… then to display items in the array, I have tried creating a repeat region, binded the values to no avail.

Maybe @Teodor or anyone else can help out?

Thanks everyone.

Did you figure it out?

This is an interesting question/topic. I’m surprised it wasn’t answered before (I think I missed it). Unfortunately there isn’t much documentation about using arrays and storage options in Wappler.

Before the array component was added, I used cookies to create a wish list. I added a buttons to add/remove the item id to/from the cookie. To retrieve the items from the database, the cookie value can be used in the query. This method works alright, but it’s fiddly managing the cookies and the storage is quite limited. I think I would probably use the array component for this now. I’m not sure of the best way to do this, but this is what I just tried:

I created a local storage array - ‘idlist’ - because I want the selection to persist (like a cookie).
I added an array component to which I added a dynamic event:
onupdated: local1.set('idlist',items,{})

I added two buttons, to add/remove items to/from the array:
arr_selectedItems.addUniq(stock_id) (‘remove’ for the other button)
The buttons show/hide, eg using: local1.data.idlist.contains(stock_id)
(Alternatively, you can use just one button using the ternary operator for the condition.)

To display the number of items selected, I used a variable: local1.data.idlist.count().

To retrieve the items from the database, you could add a button to populate a hidden form field, eg: showItems.setValue(local1.data.idlist) and submit the form.

I’m not sure if this is the best way to do it and would be interested in comments/suggestions- eg:
Perhaps the local storage contents can be managed directly, without the array component.
Perhaps the IDs can be submitted without using a form.
I added a button to clear the local storage contents (to clear all selections), but don’t know how to clear the array without refreshing the page.

This worked fine. However, how can i multiply the item depending on the users number of clicks.

For example, a user clicks on a bottom for product 1 and the cart should show the item once with the number of quantity.

Is it possible to apply this ?

My example was just for creating a list (eg a shortlist or wishlist). For something more elaborate, this might be useful:

I had a quick look at the article by @ben I linked to. This answered the above question. In my example above you can set the array value to local1.data.idlist.

It still seems that an option to remove all values from an array is missing (or perhaps I’ve missed it).

Thank you!! This is what i needed

It’s now easy to create a wishlist using the Data Store component.
Please take a look at the following tutorial showing how to use it: