Implementing Auto-Save Functionality with Local Storage

const dataToSave = { text: 'User input', count: 5 };
localStorage.setItem('myAppData', JSON.stringify(dataToSave));

const savedDataString = localStorage.getItem('myAppData');
if (savedDataString) {
  try {
    const loadedData = JSON.parse(savedDataString);
    console.log(loadedData); // Use the loaded data
  } catch (e) {
    console.error('Error parsing saved data:', e);
    // Handle potential parsing errors (e.g., corrupted data)
  }
} else {
  console.log('No saved data found.');
  // Handle no saved data (e.g., initialize with defaults)
}

import { useState, useEffect, useCallback } from 'react';
// Assume 'debounce' function is available, e.g., from lodash or custom utility

const STORAGE_KEY = 'articleDraft';

function ArticleEditor() {
  const [content, setContent] = useState('');

  // Load content from storage on mount
  useEffect(() => {
    const savedContent = localStorage.getItem(STORAGE_KEY);
    if (savedContent) {
      setContent(savedContent);
    }
  }, []); // Empty dependency array ensures this runs only once on mount

  // Define the save function
  const saveContent = useCallback((currentContent: string) => {
    console.log('Saving...', currentContent.substring(0, 50) + '...');
    localStorage.setItem(STORAGE_KEY, currentContent);
  }, []); // Dependencies for useCallback if needed, none here

  // Create a debounced version of the save function
  // Adjust debounce time (e.g., 500ms) as needed
  const debouncedSave = useCallback(debounce(saveContent, 500), [saveContent]);

  // Handle input changes and trigger the debounced save
  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newContent = event.target.value;
    setContent(newContent);
    debouncedSave(newContent); // Pass the latest value
  };

  // Optional: Save on component unmount (e.g., before navigating away)
  useEffect(() => {
    // Cleanup function runs on unmount
    return () => {
      // Ensure the latest content is saved
      saveContent(content); // Save the current state value
    };
  }, [content, saveContent]); // Depends on content and saveContent

  return (
    <div>
      <textarea
        value={content}
        onChange={handleChange}
        placeholder="Start typing..."
        rows={10}
        className="w-full p-2 border rounded"
      />
      <p className="text-sm mt-2">Content auto-saved to browser storage.</p>
    </div>
  );
}

// Simple debounce implementation example (you might use a library)
function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void {
  let timeout: ReturnType<typeof setTimeout> | null = null;
  return (...args: Parameters<T>) => {
    const later = () => {
      timeout = null;
      func(...args);
    };
    if (timeout !== null) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(later, wait);
  };
}

useEffect(() => {
  const savedDataString = localStorage.getItem('myAppData');
  if (savedDataString) {
    try {
      const loadedData = JSON.parse(savedDataString);
      // Update state or UI with loadedData
      setData(loadedData); // Example using a state setter
      console.log('Loaded data from storage.');
    } catch (e) {
      console.error('Failed to parse saved data:', e);
      // Optionally clear storage or show an error message
      // localStorage.removeItem('myAppData');
    }
  }
}, []); // Empty array means run only once on mount

import { useState, useEffect } from 'react';

const SIMPLE_STORAGE_KEY = 'simpleTextData';

export default function SimpleAutoSaveEditor() {
  const [text, setText] = useState('');

  // Load data on component mount
  useEffect(() => {
    const savedText = localStorage.getItem(SIMPLE_STORAGE_KEY);
    if (savedText !== null) {
      setText(savedText);
    }
  }, []); // Runs only once on initial render

  // Save data whenever 'text' state changes
  // A real app might use debounce/throttle here
  useEffect(() => {
    // Avoid saving on initial mount before user interaction
    // Could add a flag or check if text is different from initial load
    console.log('Auto-saving text...');
    localStorage.setItem(SIMPLE_STORAGE_KEY, text);
  }, [text]); // Runs whenever 'text' state changes

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(event.target.value);
  };

  // Optional: Clear saved data button
  const handleClear = () => {
    localStorage.removeItem(SIMPLE_STORAGE_KEY);
    setText(''); // Clear the input field as well
    console.log('Saved data cleared.');
  };

  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-semibold">Simple Auto-Save Editor</h2>
      <p>
        Type something below. Your progress is automatically saved in your
        browser&apos;s Local Storage as you type (without debounce in this simple example).
        Refresh the page to see the data load back.
      </p>
      <textarea
        value={text}
        onChange={handleChange}
        placeholder="Start typing..."
        rows={8}
        className="w-full p-2 border rounded focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
      />
      <button
        onClick={handleClear}
        className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
      >
        Clear Saved Data
      </button>
      <p className="text-sm text-gray-600 dark:text-gray-400">
        Data is stored locally in your browser. It is not sent to a server.
      </p>
    </div>
  );
}