top of page
Hello Storage

Hello Storage

Get started with browser storage.

Intermediate.png

Beginner

2K

Published:

February 26, 2023

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

Using the Storage API, you can store data in the site visitor's browser. In this example, we demonstrate how to manage data stored in the browser using the three storage types.

Each type of storage keeps the stored data for a different amount of time as described in the API Reference. To see each type in action, you can play around with visiting the site from multiple tabs, refreshing the site, closing the site, and closing the browser.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Page Elements


We built 3 identical pages with the same elements. Each page has elements used to interact with the browser storage.

On each page there are groups of elements for:

  • Adding an item to storage

  • Getting an item from storage

  • Removing an item from storage

  • Clearing all items from storage

Page Code


On all 3 pages we include the same code with one small difference. We use a different type of storage on each page by tweaking the import statement.

The rest of the code creates event handlers that perform each of the 4 storage operations when the associated button is clicked. Each event handler reads data from the input elements on the page and calls the relevant wix-storage functions.

APIs We Used

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Image placeholder.png

Add to Cart Gallery

Let customers to add products to their cart

Intermediate.png

INTERMEDIATE

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Anchor 2
bottom of page