leumas-private-shared/src/Theme/LocaleStorageMonitor.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState, useEffect } from 'react';

const LocalStorageApp = () => {
  const [key, setKey] = useState('');
  const [value, setValue] = useState('');
  const [allItems, setAllItems] = useState([]);

  useEffect(() => {
    loadAllItems();
  }, []);

  const loadAllItems = () => {
    const items = [];
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      const value = localStorage.getItem(key);
      items.push({ key, value });
    }
    setAllItems(items);
  };

  const checkLocalStorage = () => {
    const storedValue = localStorage.getItem(key);
    setValue(storedValue !== null ? storedValue : 'No value found');
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Local Storage Checker</h1>
      <div style={{ marginBottom: '20px' }}>
        <label>
          Key: 
          <input 
            type="text" 
            value={key} 
            onChange={(e) => setKey(e.target.value)} 
            style={{ marginLeft: '10px', padding: '5px' }}
          />
        </label>
        <button 
          onClick={checkLocalStorage} 
          style={{ marginLeft: '10px', padding: '5px 10px' }}
        >
          Check
        </button>
      </div>
      <div>
        <strong>Value:</strong> {value}
      </div>
      <h2>All Local Storage Items</h2>
      <table border="1" cellPadding="10" cellSpacing="0" style={{ width: '100%', marginTop: '20px' }}>
        <thead>
          <tr>
            <th>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {allItems.map((item, index) => (
            <tr key={index}>
              <td>{item.key}</td>
              <td>{item.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default LocalStorageApp;