كيفية حفظ البيانات في localStorage بأمان

// Write
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 }));

// Read
const theme = localStorage.getItem('theme');         // 'dark' or null
const user  = JSON.parse(localStorage.getItem('user')); // object or null

// Delete one key
localStorage.removeItem('theme');

// Wipe everything (careful in production)
localStorage.clear();

// Safe — null is valid input for JSON.parse
JSON.parse(null);        // → null
JSON.parse('null');      // → null

// These crash:
JSON.parse(undefined);   // SyntaxError: Unexpected token u
JSON.parse('');          // SyntaxError: Unexpected end of JSON input
JSON.parse('{bad json'); // SyntaxError

function getItem(key, defaultValue = null) {
  try {
    const raw = localStorage.getItem(key);
    if (raw === null) return defaultValue;
    return JSON.parse(raw);
  } catch {
    return defaultValue;
  }
}

// Usage
const prefs = getItem('user-prefs', { theme: 'light', lang: 'en' });
const count = getItem('visit-count', 0);

function setItem(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (err) {
    if (err.name === 'QuotaExceededError') {
      console.warn('localStorage quota exceeded. Consider evicting old data.');
      // Optional: remove the oldest entry and retry
    } else {
      console.error('localStorage write failed:', err);
    }
  }
}

// Usage
setItem('user-prefs', { theme: 'dark', lang: 'ar' });
setItem('cart', [{ id: 1, qty: 2 }, { id: 5, qty: 1 }]);

// Rough size check before writing
function estimatedSize(value) {
  return new Blob([JSON.stringify(value)]).size; // Bytes
}

// Check current total usage
function storageUsed() {
  let total = 0;
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    total += (key.length + (localStorage.getItem(key) ?? '').length) * 2; // UTF-16
  }
  return total;
}

console.log(`Storage used: ${(storageUsed() / 1024).toFixed(1)} KB`);

window.addEventListener('storage', (event) => {
  // event.key       — the key that changed (null if clear() was called)
  // event.oldValue  — previous value (string)
  // event.newValue  — new value (string, or null if removed)
  // event.storageArea — the storage object that changed
  // event.url       — URL of the page that made the change

  if (event.key === 'theme') {
    const theme = JSON.parse(event.newValue ?? 'null') ?? 'light';
    document.documentElement.setAttribute('data-theme', theme);
    console.log(`Theme synced from another tab: ${theme}`);
  }

  if (event.key === null) {
    // localStorage.clear() was called — reset all state
    resetAppState();
  }
});