Local Storage Example

100%

Local Storage Example

✓ Published1🌍 Public

Last edited Nov 24, 2020

Created on Oct 29, 2019

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.

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 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.

Rralfz123

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

70% 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

57% 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

57% match

Loading thumbnail…

Gist 3413ee69199762ea0375292e47168e84

This example shows a Redux-based offline-first data visualization for a rail system, persisting station directory data to localStorage and using a service worker to cache assets for offline use. The code uses `localforage` for asynchronous storage, `axios` for fetching JSON station data, and `throttle` from Lodash to limit state saves. It demonstrates a fetch-then-cache strategy where API responses are stored locally, while the service worker intercepts network requests to serve cached resources or fall back to offline behavior. The visualization itself is not shown, but the data flow centers on storing and retrieving station directory JSON to support the application’s offline functionality.

CCKschneid

55% 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

54% match

Loading thumbnail…

JavaScript Basics

This example demonstrates basic JavaScript syntax and concepts using console output. The code defines functions and objects, including a `person` arrow function that returns an object with `first` and `last` properties, and logs the result to the browser console. It also shows commented-out examples of variable declaration with `const` and `let`, loops, and arithmetic operations. The page uses a simple CSS class for styling but no external libraries or data sources.

CCeciliaW888

52% match

Loading thumbnail…

basic HTML webpage with Javascript.

This example demonstrates a minimal HTML page that uses JavaScript to dynamically alter its displayed text. Initially, the page presents a static heading and a welcoming message. Upon loading, a script embedded within the page accesses the heading element by its ID and changes its inner text to a new, user-defined string. The implementation relies on the core Document Object Model (DOM) API, specifically `getElementById` and the `innerHTML` property, to perform the update. No external libraries or data sources are involved; the behavior is entirely contained within the single `index.html` file.

NNita

52% match