Hello Storage

Store data in the browser.

Introduction Last updated: 18 Mar 2025

About


This example demonstrates how to save data in the browser using 3 types of storage:

  • Local storage - Data never expires. 

  • Session storage - Data is available until the visitor closes the browser tab or window. 

  • Memory storage - Data is available until the site visitor refreshes or closes the page.

You can create key value pairs to add to the browser storage, and can then retrieve or delete those keys from the storage.

APIs


How we built it


We added the following to our site:

Page Elements

The Local, Session, and Memory pages all contain the same elements: 

  • Buttons to set, get, and remove key/value pairs from storage. 

  • Text input elements to enter keys and values. 

  • A text element to display the status of the keys once an operation is completed. 

  • Menu items to switch between pages that demonstrate the 3 types of browser storage.

Frontend Code

The Local, Session, and Memory code files all contain the same code with the exception of the import statement. The import statements differentiate the type of storage being used for each page. 

In these files, we: 

  • Create a variable to track the current key value. 
  • Define event handlers for the following actions: 
  • When a key is entered in the $w('#setKey') text input element. 
  • When the Set, Get, and Remove buttons are clicked. 
  • Save the provided key value pair in the browser storage when the Set button is clicked. 
  • Retrieve the value with the provided key from the browser storage when the Get button is clicked. 
  • Removed the provided key and its value from the browser storage when the Remove button is clicked. 
  • Update the status text based on the action that took place.

Code Snippets


Local
Copy
import { local } from "@wix/site-storage"; $w.onReady(async function () { setItemHandler(); getItemHandler(); removeItemHandler(); }); function setItemHandler() { $w("#setItemButton").onClick(async () => { const key = $w("#setKey").value; const value = $w("#setValue").value; if (!key || !value) { $w("#statusTextElement").text = "Error: Both key and value are required."; return; } await local.setItem(key, value); $w("#setKey").value = ""; $w("#setValue").value = ""; updateStatusText("set", key, value); }); } function getItemHandler() { $w("#getItemButton").onClick(async () => { const key = $w("#getKey").value; if (!key) { $w("#statusTextElement").text = "Error: Key is required to retrieve a value."; return; } const value = await local.getItem(key); $w("#getValue").value = value || "Not found"; $w("#getKey").value = ""; updateStatusText("get", key, value); }); } function removeItemHandler() { $w("#removeItemButton").onClick(async () => { const key = $w("#removeKey").value; if (!key) { $w("#statusTextElement").text = "Error: Key is required to remove a value."; return; } await local.removeItem(key); $w("#removeKey").value = ""; updateStatusText("remove", key, ""); }); } function updateStatusText(actionType, key, value) { const messages = { set: `Status: Key "${key}" set`, get: `Status: Key "${key}" retrieved`, remove: `Status: Key "${key}" removed`, }; if (messages[actionType] && (actionType === "remove" || (key && value))) { $w("#statusTextElement").text = messages[actionType]; } else { $w("#statusTextElement").text = "Error: Key or value not set"; } }
Memory
Copy
import { memory } from "@wix/site-storage"; $w.onReady(async function () { setGetAndRemoveValues(); }); function setGetAndRemoveValues() { // Set: $w("#setItemButton").onClick(async () => { const key = $w("#setKey").value; const value = $w("#setValue").value; if (!key || !value) { $w("#statusTextElement").text = "Error: Both key and value are required."; return; } await memory.setItem(key, value); $w("#setKey").value = ""; $w("#setValue").value = ""; updateStatusText("set", key, value); }); // Get: $w("#getItemButton").onClick(async () => { const key = $w("#getKey").value; if (!key) { $w("#statusTextElement").text = "Error: Key is required to retrieve a value."; return; } const value = await memory.getItem(key); $w("#getValue").value = value || ""; $w("#getKey").value = ""; updateStatusText("get", key, value); }); // Remove: $w("#removeItemButton").onClick(async () => { const key = $w("#removeKey").value; if (!key) { $w("#statusTextElement").text = "Error: Key is required to remove a value."; return; } await memory.removeItem(key); $w("#removeKey").value = ""; updateStatusText("remove", key, ""); }); } function updateStatusText(actionType, key, value) { const messages = { set: `Status: Key "${key}" set`, get: `Status: Key "${key}" retrieved`, remove: `Status: Key "${key}" removed`, }; if (messages[actionType] && (actionType === "remove" || (key && value))) { $w("#statusTextElement").text = messages[actionType]; } else { $w("#statusTextElement").text = "Error: Key or value not set"; } }
Session
Copy
import { session } from "@wix/site-storage"; $w.onReady(async function () { setGetAndRemoveValues(); }); function setGetAndRemoveValues() { // Set: $w("#setItemButton").onClick(async () => { const key = $w("#setKey").value; const value = $w("#setValue").value; if (!key || !value) { $w("#statusTextElement").text = "Error: Both key and value are required."; return; } await session.setItem(key, value); $w("#setKey").value = ""; $w("#setValue").value = ""; updateStatusText("set", key, value); }); // Get: $w("#getItemButton").onClick(async () => { const key = $w("#getKey").value; if (!key) { $w("#statusTextElement").text = "Error: Key is required to retrieve a value."; return; } const value = await session.getItem(key); $w("#getValue").value = value || ""; $w("#getKey").value = ""; updateStatusText("get", key, value); }); // Remove: $w("#removeItemButton").onClick(async () => { const key = $w("#removeKey").value; if (!key) { $w("#statusTextElement").text = "Error: Key is required to remove a value."; return; } await session.removeItem(key); $w("#removeKey").value = ""; updateStatusText("remove", key, ""); }); } function updateStatusText(actionType, key, value) { const messages = { set: `Status: Key "${key}" set`, get: `Status: Key "${key}" retrieved`, remove: `Status: Key "${key}" removed`, }; if (messages[actionType] && (actionType === "remove" || (key && value))) { $w("#statusTextElement").text = messages[actionType]; } else { $w("#statusTextElement").text = "Error: Key or value not set"; } }

Get Help


Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.

Did this help?