<div x-data="{ 
        theme: localStorage.getItem('theme') || 'light',
        toggleTheme() {
            this.theme = this.theme === 'light' ? 'dark' : 'light';
            localStorage.setItem('theme', this.theme);
        } 
}">
    <p>Current Theme: <span x-text="theme"></span></p>
    <button @click="toggleTheme()">Toggle Theme</button>
</div>

<div x-data="{ 
        name: localStorage.getItem('name') || '', 
        age: localStorage.getItem('age') || '', 
        saveData() {
            localStorage.setItem('name', this.name);
            localStorage.setItem('age', this.age);
        }
}">
    <label>
        Name: <input type="text" x-model="name">
    </label>
    <label>
        Age: <input type="number" x-model="age">
    </label>
    <button @click="saveData()">Save</button>
    <p>Saved Name: <span x-text="localStorage.getItem('name')"></span></p>
    <p>Saved Age: <span x-text="localStorage.getItem('age')"></span></p>
</div>

<div x-data="{ 
        tasks: JSON.parse(localStorage.getItem('tasks')) || [], 
        newTask: '', 
        addTask() {
            this.tasks.push(this.newTask);
            this.newTask = '';
        } 
}" 
x-init="$watch('tasks', value => localStorage.setItem('tasks', JSON.stringify(value)))">
    <input type="text" x-model="newTask" placeholder="New Task">
    <button @click="addTask()">Add Task</button>
    <ul>
        <template x-for="task in tasks" :key="task">
            <li x-text="task"></li>
        </template>
    </ul>
</div>

<div x-data="{ 
        name: localStorage.getItem('name') || '', 
        clearData() {
            localStorage.removeItem('name');
            this.name = '';
        }
}">
    <label>
        Name: <input type="text" x-model="name">
    </label>
    <button @click="clearData()">Clear Name</button>
    <p>Saved Name: <span x-text="localStorage.getItem('name') || 'No Name Saved'"></span></p>
</div>

<div x-data="{ 
        settings: JSON.parse(localStorage.getItem('settings')) || { theme: 'light', notifications: true }, 
        saveSettings() {
            localStorage.setItem('settings', JSON.stringify(this.settings));
        }
}">
    <label>
        Theme:
        <select x-model="settings.theme">
            <option value="light">Light</option>
            <option value="dark">Dark</option>
        </select>
    </label>
    <label>
        Notifications:
        <input type="checkbox" x-model="settings.notifications">
    </label>
    <button @click="saveSettings()">Save Settings</button>
    <p>Saved Theme: <span x-text="settings.theme"></span></p>
    <p>Notifications Enabled: <span x-text="settings.notifications ? 'Yes' : 'No'"></span></p>
</div>