User Preferences Dashboard

Build a user preferences dashboard that displays and manages multiple user settings stored in browser storage.

Overview

Create a system that stores user preferences as key-value pairs and provides functionality to display all preferences in a formatted list. The system should support adding, viewing, and clearing preferences.

Requirements

Storage Management

The system must store user preferences with the following structure:

• Keys should be preference names (e.g., "theme", "language", "notifications")
• Values can be strings, numbers, booleans, or simple objects
• All preferences must persist across browser sessions

Display Functionality

Implement a function that generates a formatted display of all stored preferences:

• Must show each preference name and its current value
• Should handle different data types appropriately
• Must return results in a consistent, readable format

Data Collection

Implement functionality to collect all preferences into a structured format suitable for export or display in a UI.

Implementation

@generates

API

/**
 * Stores a user preference with the given key and value
 * @param {string} key - The preference name
 * @param {*} value - The preference value (any serializable type)
 */
function setPreference(key, value) {
  // IMPLEMENTATION HERE
}

/**
 * Retrieves all stored preferences as an object
 * @returns {Object} An object containing all key-value pairs of preferences
 */
function getAllPreferences() {
  // IMPLEMENTATION HERE
}

/**
 * Generates a formatted string displaying all preferences
 * @returns {string} A formatted string with each preference on a new line
 */
function displayPreferences() {
  // IMPLEMENTATION HERE
}

/**
 * Clears all stored preferences
 */
function clearAllPreferences() {
  // IMPLEMENTATION HERE
}

module.exports = {
  setPreference,
  getAllPreferences,
  displayPreferences,
  clearAllPreferences
};

Test Cases

• Setting three preferences (theme="dark", fontSize=16, notifications=true) and calling getAllPreferences returns an object with all three key-value pairs @test
• Setting preferences and calling displayPreferences returns a formatted string containing all preference names and values on separate lines @test
• After clearing all preferences with clearAllPreferences, getAllPreferences returns an empty object @test
• getAllPreferences correctly handles mixed data types including strings, numbers, booleans, and objects @test

Dependencies { .dependencies }

store { .dependency }

Provides cross-browser local storage functionality with automatic serialization.

@satisfied-by