Как сделать глобальную область видимости переменной?

Кэширование в браузере: LocalStorage, SessionStorage, Cache API

Существует несколько способов хранить данные в браузере. Выбор зависит от объема данных и времени жизни кэша.

LocalStorage — простое и надежное хранилище

// Сохранение данных
localStorage.setItem('user', JSON.stringify({ id: 1, name: 'John' }))
localStorage.setItem('theme', 'dark')

// Получение данных
const user = JSON.parse(localStorage.getItem('user'))
const theme = localStorage.getItem('theme')

// Удаление
localStorage.removeItem('user')

// Размер: до 5-10 МБ
// Время жизни: вечно
// Доступ: только из текущего домена

SessionStorage — временное хранилище

// Работает так же как localStorage
sessionStorage.setItem('tempData', 'value')
const data = sessionStorage.getItem('tempData')

// Удаляется при закрытии вкладки
// Размер: 5-10 МБ

Cache API — для Service Workers

caches.open('my-cache').then(cache => {
  cache.put('/api/data', new Response(JSON.stringify({data: 123})))
  cache.match('/api/data').then(response => {
    console.log(response.json())
  })
})

IndexedDB — для больших объемов данных

const dbRequest = indexedDB.open('myDatabase', 1)

dbRequest.onsuccess = (event) => {
  const db = event.target.result
  const transaction = db.transaction('users', 'readwrite')
  const objectStore = transaction.objectStore('users')
  
  // Добавить
  objectStore.add({ id: 1, name: 'John' })
  
  // Получить
  objectStore.get(1).onsuccess = (e) => {
    console.log(e.target.result)
  }
}

Storage Cache Wrapper

class StorageCache {
  constructor(prefix = 'app_') {
    this.prefix = prefix
  }
  
  set(key, value, ttl = null) {
    const data = { value, timestamp: Date.now(), ttl }
    localStorage.setItem(this.prefix + key, JSON.stringify(data))
  }
  
  get(key) {
    const item = localStorage.getItem(this.prefix + key)
    if (!item) return null
    
    const { value, timestamp, ttl } = JSON.parse(item)
    
    if (ttl && Date.now() - timestamp > ttl) {
      localStorage.removeItem(this.prefix + key)
      return null
    }
    
    return value
  }
}

const cache = new StorageCache()
cache.set('user', { id: 1, name: 'John' }, 3600000)
const user = cache.get('user')

Сравнение способов

Рекомендации по использованию

• LocalStorage для настроек и токенов
• SessionStorage для временных данных
• Cache API для Service Workers и offline
• IndexedDB для больших объемов данных