Browsers allow websites to store data on the visitor’s device. This is called local storage. The getItem(), storeItem(), clearStorage(), and removeItem() functions control it.
This example is inspired by Daniel Shiffman’s Loading JSON Data and Loading Tabular Data examples for Processing written in Java. It uses a class to organize data for a bubble. The visitor can add new bubbles, and their data will be saved in local storage. If the visitor revisits the sketch, it will reload the same bubbles.
Local Storage: Created by Caleb Foss. Inspired by Daniel Shiffman's examples. From 2024 onwards, edited and maintained by p5.js Contributors and Processing Foundation. Licensed under CC BY-NC-SA 4.0.
You can find the code history of these examples here: 2023 code, pre-2023 JSON example, pre-2023 Table example. You can suggest improvements by contributing to the current website!
Related Examples
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."
Local Storage
Save data from the browser on the device.
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."
JSON
Store data in JavaScript object notation.
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."
Table
Store data as comma-separated values.