localStorage

🛠 При помощи localStorage можно сохранять данные, относящиеся к пользователю, не храня их на сервере. В следующем примере будем запоминать размер шрифта на сайте и восстанавливать размер из хранилища, если он был изменён до этого.

🛠 Можно использовать для синхронизации нескольких открытых в браузере вкладок. При изменении размера шрифта в одной вкладке мы узнаем об этом во всех остальных и тоже изменим размер.

        
          
          function changePageFontSize(size) {  document.style.fontSize = `${size}px`}window.addEventListener('storage', function (evt) {  if (evt.key === 'pageFontSize') {    changePageFontSize(evt.newValue)  }})
          function changePageFontSize(size) {
  document.style.fontSize = `${size}px`
}

window.addEventListener('storage', function (evt) {
  if (evt.key === 'pageFontSize') {
    changePageFontSize(evt.newValue)
  }
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

🛠 Иногда нам нужно сохранить не просто текст, а целую структуру данных. В этом нам поможет JSON.stringify().

        
          
          const user = {  name: 'Дока Дог',  avatarUrl: 'mascot-doka.svg'}localStorage.setItem('user', JSON.stringify(user))
          const user = {
  name: 'Дока Дог',
  avatarUrl: 'mascot-doka.svg'
}

localStorage.setItem('user', JSON.stringify(user))

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

И после чтения парсим:

        
          
          function readUser() {  const userJSON = localStorage.getItem('user')  if (userJSON === null) {    return undefined  }  // Если вдруг в хранилище оказался невалидный JSON,  // предохраняемся от этого  try {    return JSON.parse(userJSON)  } catch (e) {    localStorage.removeItem('user')    return undefined  }}console.log(readUser())// {//  name: 'Дока Дог',//  avatarUrl: 'mascot-doka.svg'// }
          function readUser() {
  const userJSON = localStorage.getItem('user')

  if (userJSON === null) {
    return undefined
  }

  // Если вдруг в хранилище оказался невалидный JSON,
  // предохраняемся от этого
  try {
    return JSON.parse(userJSON)
  } catch (e) {
    localStorage.removeItem('user')
    return undefined
  }
}

console.log(readUser())
// {
//  name: 'Дока Дог',
//  avatarUrl: 'mascot-doka.svg'
// }

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

🛠 Если ваш сайт использует скрипты аналитики или другие внешние библиотеки, то они также имеют доступ к хранилищу. Поэтому лучше именовать ключи для записи в хранилище с префиксом в едином стиле. Например, при записи чего-либо на таком сайте я бы выбрал префикс YD_{название ключа}, тогда можно сгруппировать только нужные значения или отфильтровать их в инструментах разработчика.

🛠 Используйте функции-обёртки для предотвращения ошибок, связанных с неудачными попытками записи, отсутствием localStorage в браузере и дублированием кода.

        
          
          function getItem(key, value) {  try {    return window.localStorage.getItem(key)  } catch (e) {    console.log(e)  }}function setItem(key, value) {  try {    return window.localStorage.setItem(key, value)  } catch (e) {    console.log(e)  }}function setJSON(key, value) {  try {    const json = JSON.stringify(value)    setItem(key, json)  } catch (e) {    console.error(e)  }}function getJSON(key) {  try {    const json = getItem(key)    return JSON.parse(json)  } catch (e) {    console.error(e)  }}
          function getItem(key, value) {
  try {
    return window.localStorage.getItem(key)
  } catch (e) {
    console.log(e)
  }
}

function setItem(key, value) {
  try {
    return window.localStorage.setItem(key, value)
  } catch (e) {
    console.log(e)
  }
}

function setJSON(key, value) {
  try {
    const json = JSON.stringify(value)

    setItem(key, json)
  } catch (e) {
    console.error(e)
  }
}

function getJSON(key) {
  try {
    const json = getItem(key)

    return JSON.parse(json)
  } catch (e) {
    console.error(e)
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

🛠 Как предотвратить удаление данных из хранилища?

Когда и как происходит удаление данных? Как нам сохранить данные?

Вы можете использовать два способа хранения данных — «временный» и «постоянный». Во «временном» режиме браузер может удалить ваши данные, при условии, что этот процесс не помешает работе пользователя. В постоянном режиме этого не случится, даже в случае нехватки места. Однако в этом режиме пользователь может самостоятельно очищать хранилище.

По умолчанию все хранилища (localStorage, IndexedDB, Cache API и т. д.) работают во временном режиме. Если сайт не запросил постоянное хранение данных — браузер может удалить его данные по своему усмотрению. Например, если на устройстве мало места.

🛠 Как выглядит процесс очистки?

При автоматической очистке места браузеры должны удалить наименее ценные для пользователя данные.

Браузеры на основе Chromium освобождают место последовательно, удаляя данные сайтов. Удаление начинается с сайтов, которые давно не посещались, и продолжается пока не освободится достаточно места.

Internet Explorer 10+ не очищает данные, но при этом не даёт записывать данные сверх лимита.

Firefox начинает очистку, когда заканчивается свободное место на диске. Порядок удаления определяется по тому же принципу, что и в браузерах на основе Chromium.

Safari раньше вообще не удалял данные, но сейчас использует семидневный лимит на хранение всех записываемых данных.

🛠 Как включить режим постоянного хранения данных?

Все необходимые методы для работы с браузерным хранилищем находятся в window.navigator.storage. Нужный нам метод называется persist():

        
          
          (async () => {  // Пытается переключиться на «постоянный» режим хранения.  // Возвращает true, если получилось. false, если нет.  const persistModeEnabled = await window.navigator.storage?.persist()})()
          (async () => {
  // Пытается переключиться на «постоянный» режим хранения.
  // Возвращает true, если получилось. false, если нет.
  const persistModeEnabled = await window.navigator.storage?.persist()
})()

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно усовершенствовать наш код, воспользовавшись методом persisted(). Этот метод вернёт нам true, если хранилище уже переключено в постоянный режим.

Мы вызываем метод persisted() и переключаем хранилище на постоянный режим, только если оно ещё не переключено:

        
          
          (async () => {  // boolean значение, указавающее на то,  // включен ли «постоянный» режим хранения данных изначально  const isAlreadyPersist = await window.navigator.storage?.persisted()  if (isAlreadyPersist) {    console.info('Хранилище уже переключено в постоянный режим хранения.')    return  }  // boolean значение, указывающее на то,  // удалось ли переключиться на «постоянный» режим хранения  const persistModeEnabled = await window.navigator.storage?.persist()  if (persistModeEnabled) {    console.info('Браузер успешно сменил режим хранения на «постоянный».')    return  }  console.info(    'Браузер столкнулся с проблемами при попытке смены режима. Возможно,    вам стоит обновиться до последней версии либо использовать    на сайте HTTPS-протокол.'  )})()
          (async () => {
  // boolean значение, указавающее на то,
  // включен ли «постоянный» режим хранения данных изначально
  const isAlreadyPersist = await window.navigator.storage?.persisted()

  if (isAlreadyPersist) {
    console.info('Хранилище уже переключено в постоянный режим хранения.')
    return
  }

  // boolean значение, указывающее на то,
  // удалось ли переключиться на «постоянный» режим хранения
  const persistModeEnabled = await window.navigator.storage?.persist()

  if (persistModeEnabled) {
    console.info('Браузер успешно сменил режим хранения на «постоянный».')
    return
  }

  console.info(
    'Браузер столкнулся с проблемами при попытке смены режима. Возможно,
    вам стоит обновиться до последней версии либо использовать
    на сайте HTTPS-протокол.'
  )
})()

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать