Store data in the browser.
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.
We added the following to our site:
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.
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:
$w('#setKey')
text input element. 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";
}
}
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";
}
}
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";
}
}
Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.
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.