TNT | JS Apps | Local Storage Tutorial

Interactive Playground

Customize the shape below, then save your settings. Refresh the page to see them restored!

Shape Settings

Color: Choose the shape's fill color

Size: 100px Drag to resize the shape

Shape: Select a different shape type

Border Width: 0px Adjust the border thickness

Border Color: Choose the border color

Enable Shadow Add a drop shadow effect

Rotation: 0° Rotate the shape

Opacity: 100% Adjust transparency

Animation Speed: 2s Change animation duration

Enable Animation Toggle bouncing movement

What's Happening in the Code?

Saving Data:

// Step 1: Collect all settings into an object
const settings = {
    color: '#4CAF50',
    size: 100,
    shape: 'circle'
};

// Step 2: Convert object to a JSON string
const settingsString = JSON.stringify(settings);
// Result: '{"color":"#4CAF50","size":100,"shape":"circle"}'

// Step 3: Save to localStorage with a key name
localStorage.setItem('shapeSettings', settingsString);

Loading Data:

// Step 1: Retrieve the string from localStorage
const savedString = localStorage.getItem('shapeSettings');

// Step 2: Check if data exists (returns null if not found)
if (savedString !== null) {
    // Step 3: Convert JSON string back to an object
    const settings = JSON.parse(savedString);
    
    // Step 4: Use the settings
    console.log(settings.color); // '#4CAF50'
}

How to Clear localStorage from Developer Console

Opening Developer Tools

Keyboard Shortcut (Recommended):
- Windows/Linux: Press Ctrl + Shift + J
Right-Click Method:
Right-click anywhere on the page → Select "Inspect" or "Inspect Element"
Browser Menu:
Click the three dots (⋮) menu → More Tools → Developer Tools

Method 1: Using the Console Tab

Click on the "Console" tab in Developer Tools
Type one of these commands and press Enter:

                    // Remove only the shape settings we saved:

                    localStorage.removeItem('shapeSettings')

                    // OR remove ALL localStorage data for this website:

                    localStorage.clear()

Method 2: Using the Application Tab (Visual Method)

In Developer Tools, click the "Application" tab (might be under ">>" if hidden)
In the left sidebar, expand "Local Storage"
Click on your website's URL (e.g., file:// or localhost)
You'll see a table with all stored key-value pairs
Right-click on a row to delete it, or click "Clear All" (🚫 icon) at the top

Method 3: Quick Clear via Browser Settings

Open browser settings
Search for "Clear browsing data" or "Clear site data"
Make sure "Cookies and other site data" is checked (this includes localStorage)
Click Clear/Delete

⚠️ Warning: This clears data for ALL websites, not just this one!

Verifying Data is Cleared

After clearing, type this in the console to confirm:

                    console.log(localStorage.getItem('shapeSettings'))

                    // Should output: null

Useful Console Commands to Try

                    // See all keys in localStorage:

                    Object.keys(localStorage)

                    // See the actual saved data:

                    localStorage.getItem('shapeSettings')

                    // See it formatted nicely:

                    JSON.parse(localStorage.getItem('shapeSettings'))

                    // Check how much storage is used:

                    new Blob(Object.values(localStorage)).size + ' bytes'

Austin and Claude's Local Storage Playground

Persistent Storage

Key-Value Pairs

Strings Only

Site-Specific

Interactive Playground

Shape Settings

What's Happening in the Code?

Saving Data:

Loading Data:

Current localStorage Contents