Local Storage Example

100%

Local Storage Example

✓ Published0🌍 Public

Last edited Nov 24, 2020

Created on Nov 24, 2020

This example demonstrates how a browser persists user input across page reloads using the Web Storage API. It shows a text field and button; entering a name and submitting it saves the value, which is then restored into the input field upon refreshing the page. The JavaScript code uses `window.localStorage`, `storage.getItem`, and `storage.setItem` to manage the stored data, and it appends a new paragraph element to the document body after each submission.

AI-generated description

A simple example showing how local storage works

Enter a name, press the button and reload the page. The name will be recovered from local storage.

MIT Licensed

Similar vizzes

Loading thumbnail…

Local Storage Example

This example demonstrates how to persist and retrieve user input across page reloads using the Web Storage API. It shows a text input and button that save a name to `window.localStorage`, then restore that value when the page is reloaded. The code also illustrates storing and retrieving structured JSON data, including updating nested objects and converting them back to strings for storage. The interface is plain HTML and JavaScript, with no external visualization libraries.

LLaurens

90% match

Loading thumbnail…

HTML5 WebStrage API

This example demonstrates how to use the HTML5 Web Storage API through an interactive LocalStorage test interface. The page provides a form to add key-value pairs and displays a live table of stored data with Edit and Remove actions. Users can also populate initial sample values or clear all stored entries. The implementation uses jQuery 2.1.3 for DOM manipulation and Bootstrap 2.0.4 for styling, while directly calling the native localStorage methods like `setItem`, `getItem`, and `removeItem`. The code checks localStorage availability and outputs all stored pairs into a table.

MMiyaton

66% match

Loading thumbnail…

Chrome Extention

This example shows a simple Chrome extension for saving user-entered text leads into a list. The interface uses an input field and a “SAVE INPUT” button, with saved entries rendered as clickable links in an unordered list. The code uses plain JavaScript event listeners and DOM manipulation, including `getElementById` and `innerHTML`, to update the display dynamically. It relies on HTML, CSS, and JavaScript only, without external libraries, and does not persist data beyond the current session.

GGayan Priyadarshana

58% match

Loading thumbnail…

simple quiz

This simple quiz demonstrates a login-gated question interface that remembers returning users via cookies and localStorage. The page shows a start screen with a login form, then cycles through multiple-choice questions with radio buttons and previous/next navigation. JavaScript stores user answers in an array and compares them against the hardcoded correct answers to generate a results page. The code uses jQuery for DOM manipulation and event handling, along with native browser APIs like `document.cookie` and `localStorage.setItem`.

KKacieW

53% match

Loading thumbnail…

Javascript

This example demonstrates a collection of JavaScript utilities for enhancing web page interactivity, focusing on user-input controls and navigation. It shows how keyboard and click events can be managed to prevent accidental data loss and to streamline table or list interactions. The code uses plain JavaScript with jQuery for DOM manipulation, including the `bind` method for event handling, `history.pushState` for URL updates without page reloads, and jQuery’s `prop` and `is` methods to toggle checkbox states. The snippets cover F5 key disabling, dynamic URL changes, and bulk selection of checkboxes, reflecting a typical admin-panel or form-heavy workflow.

IIliaIdakiev

53% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses plain JavaScript to insert dynamic text into a paragraph element. The code selects the paragraph with `document.querySelector` and sets its content, showing how basic DOM manipulation works with JavaScript. The page uses no external libraries, relying only on native browser APIs, and is structured as a simple starter template with an HTML file and a separate `main.js` script. The rendered output is a single line of text updated by the script, illustrating the core pattern of client-side scripting without additional frameworks.

Sshahbaj1999

52% match

Loading thumbnail…

0415..0

This example demonstrates basic JavaScript and HTML document manipulation on a bare-minimum web page. It shows how to output dynamic text directly into the page body using `document.write`, including styled content with inline CSS and string concatenation with a variable `age`. The page also defines a function `getGrade()` that returns a local variable, calls it, and writes the result with additional text. The code uses core JavaScript APIs and the DOM’s `document.write` method, with the main script embedded in the HTML. The rendering approach is direct text insertion rather than canvas or D3 visualizations.

KKim-Mingyeong

51% match

Loading thumbnail…

Untitled

This example demonstrates interactive manipulation of a text paragraph’s style and visibility through three buttons. The interface uses plain HTML, CSS, and JavaScript, with inline `onclick` handlers calling custom functions that directly modify the element’s `style` properties, such as `color`, `fontSize`, `fontStyle`, and `visibility`. No external libraries or frameworks are used; the page consists of a single `index.html` file with embedded scripts.

Wwoojinsong

51% match