Для чего нужен local storage?

Для чего нужен local storage?

Local Storage — это механизм браузера для постоянного хранения данных на клиентской стороне. Это ключевой инструмент для создания удобных и функциональных веб-приложений.

Основной синтаксис

// Сохранить данные
localStorage.setItem('username', 'John');
localStorage.setItem('theme', 'dark');

// Получить данные
const username = localStorage.getItem('username');  // 'John'
const theme = localStorage.getItem('theme');        // 'dark'

// Удалить данные
localStorage.removeItem('username');

// Очистить всё хранилище
localStorage.clear();

// Получить количество элементов
const count = localStorage.length;

Основное назначение Local Storage

1. Сохранение пользовательских предпочтений

// Запомнить тему, которую выбрал пользователь
function setTheme(theme) {
  localStorage.setItem('theme', theme);
  document.body.classList.toggle('dark', theme === 'dark');
}

// При загрузке страницы восстановить тему
function applyTheme() {
  const savedTheme = localStorage.getItem('theme') || 'light';
  setTheme(savedTheme);
}

applyTheme();

2. Сохранение состояния формы (draft)

// Пользователь заполняет форму, но не отправляет
function autosaveForm(formData) {
  localStorage.setItem('formDraft', JSON.stringify(formData));
}

// Если страница перезагружается, восстановить данные
function restoreFormDraft() {
  const draft = localStorage.getItem('formDraft');
  return draft ? JSON.parse(draft) : null;
}

const savedData = restoreFormDraft();
if (savedData) {
  form.username.value = savedData.username;
  form.email.value = savedData.email;
}

3. Кэширование данных

// Сохранить результаты API запроса
async function fetchUserWithCache(userId) {
  const cacheKey = `user_${userId}`;
  const cached = localStorage.getItem(cacheKey);
  
  if (cached) {
    console.log('Данные из кэша');
    return JSON.parse(cached);
  }
  
  const response = await fetch(`/api/users/${userId}`);
  const user = await response.json();
  
  // Сохранить на 1 час
  localStorage.setItem(cacheKey, JSON.stringify(user));
  localStorage.setItem(`${cacheKey}_time`, Date.now().toString());
  
  return user;
}

4. Информация сессии (не критичная)

// Запомнить, был ли пользователь на странице
function trackVisit() {
  const visited = JSON.parse(localStorage.getItem('pages_visited') || '[]');
  visited.push({
    page: window.location.pathname,
    time: new Date().toISOString()
  });
  
  localStorage.setItem('pages_visited', JSON.stringify(visited));
}

5. Размер и лимиты

// Local Storage обычно вмещает 5-10 MB
// Зависит от браузера и операционной системы

const maxSize = 1024 * 1024 * 5; // 5 MB
const currentSize = new Blob(Object.values(localStorage)).size;

if (currentSize > maxSize * 0.9) {
  console.warn('Local Storage почти полон');
  // Очистить старые данные
}

Практический пример: React хук для Local Storage

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = React.useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });
  
  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };
  
  return [storedValue, setValue];
}

// Использование:
function UserProfile() {
  const [username, setUsername] = useLocalStorage('username', '');
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  
  return (
    <div>
      <input 
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Theme: {theme}
      </button>
    </div>
  );
}

Local Storage vs другие способы хранения

1. Local Storage vs Cookies

// Local Storage
localStorage.setItem('user', 'John');  // 5-10 MB, только на клиенте

// Cookies
document.cookie = 'user=John; path=/';  // 4 KB, отправляется на сервер

Различия:

• Local Storage: больше данных, не отправляется на сервер
• Cookies: меньше данных, отправляется с каждым запросом, срок действия

2. Local Storage vs Session Storage

// Local Storage — сохраняется даже после закрытия браузера
localStorage.setItem('theme', 'dark');

// Session Storage — очищается при закрытии вкладки
sessionStorage.setItem('temp', 'value');

3. Local Storage vs IndexedDB

// Local Storage — простой, string-only
localStorage.setItem('data', JSON.stringify({ large: 'object' }));

// IndexedDB — асинхронный, большие объемы (100+ MB)
// Для больших данных используй IndexedDB

Когда НЕ использовать Local Storage

1. Чувствительные данные (пароли, токены)

// ❌ НЕПРАВИЛЬНО
localStorage.setItem('password', 'mySecretPass123');
localStorage.setItem('authToken', 'jwt-token-here');

// ✅ ПРАВИЛЬНО
// Токены должны храниться в httpOnly cookies на сервере
// Или в памяти (но потеряется при перезагрузке)

2. Большие объемы данных (> 5 MB)

// ❌ НЕПРАВИЛЬНО
const hugeDataset = Array(1000000).fill({ data: 'x' });
localStorage.setItem('data', JSON.stringify(hugeDataset));

// ✅ ПРАВИЛЬНО
// Используй IndexedDB или WebSQL

3. Критичные данные, которые должны быть на сервере

// ❌ НЕПРАВИЛЬНО
localStorage.setItem('accountBalance', '1000');

// ✅ ПРАВИЛЬНО
// Все финансовые данные должны храниться на сервере
// Local Storage может быть отредактирован пользователем

Security: взлом Local Storage

// Local Storage уязвим для XSS атак!
const userInput = '<img src=x onerror="alert(localStorage.getItem(\"token\"))">';
document.body.innerHTML = userInput;  // Хакер получит доступ!

// Защита:
// 1. Санитизировать все пользовательские данные
// 2. Использовать Content Security Policy (CSP)
// 3. Вставлять HTML текст, а не innerHTML
// 4. Не хранить чувствительные данные

Полезные утилиты

// Проверить доступность Local Storage
function isLocalStorageAvailable() {
  try {
    const test = '__test__';
    localStorage.setItem(test, test);
    localStorage.removeItem(test);
    return true;
  } catch (e) {
    return false;
  }
}

// Сохранить с временем жизни
function setItemWithExpiry(key, value, expiryMs) {
  const now = new Date();
  const item = {
    value: value,
    expiry: now.getTime() + expiryMs
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getItemWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
  
  const item = JSON.parse(itemStr);
  const now = new Date();
  
  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  
  return item.value;
}

// Использование:
setItemWithExpiry('user', { name: 'John' }, 60 * 60 * 1000);  // 1 час
const user = getItemWithExpiry('user');

Итог

Local Storage нужен для:

• Пользовательские предпочтения (тема, язык, размер шрифта)
• Draft данные (сохранение незавершённых форм)
• Кэширование (API результаты)
• Простое состояние приложения

НЕ используй для:

• Пароли и токены (используй httpOnly cookies)
• Большие данные (используй IndexedDB)
• Критичные финансовые данные (только сервер)
• Чувствительная информация

Local Storage — это простой и удобный способ улучшить UX, но используй его ответственно!