Javascript localstorage время жизни

LocalStorage в JavaScript: что такое и как работает

На заре Интернета сервер был единственным способом для хранения данных. В современных браузерах нам стало доступно хранилище localStorage , которое позволяет сохранить небольшие данные в формате “ключ — значение”.

В этой статье мы разберемся как работает и используется localStorage в JavaScript. Для всех наших примеров мы будем использовать браузер Google Chrome.

В конце, мы создадим небольшой проект, чтобы понять, как работает localStorage на практике.

Что такое localStorage?

LocalStorage — это по сути небольшая база данных, которая доступна в любом браузере. Благодаря localStorage , веб-приложения могут использовать данные, которые хранятся локально на устройстве пользователя без ограничения срока жизни.

Данные остаются сохраненными, даже после того как пользователь закрыл вкладку или окно браузера.

Информация в localStorage сохраняется только в браузере пользователя на том устройстве, которое он изначально использовал для доступа к сайту. То есть вся сохраненная информация привязывается к конкретному браузеру. Пользователи не смогут получить доступ к сохраненным данным, если они повторно посетят тот же сайт, используя другой браузер или другое устройство.

Отличие localStorage от sessionStorage

Помимо localStorage , в браузере есть еще один способ хранить информацию под названием sessionStorage , с помощью которого данные сохраняются только для одной сессии (вкладки). Хранилище sessionStorage автоматически очищается после закрытия вкладки.

LocalStorage: максимальный объем данных

LocalStorage позволяет хранить около 5 МБ данных, что несомненно является большим преимуществом. Для сравнения, максимальный размер файла cookie составляет 4 КБ.

Где находится localStorage?

Самый простой способ увидеть как физически выглядит хранилище localStorage — это открыть вкладку Application внутри так называемых Инструментов Разработчика браузера (Google Chrome).

Данная вкладка, помимо local storage, содержит и другие разделы для работы с cookies, кэшем приложения, а также с изображениями, шрифтами и стилями.

Важно отметить, что браузер создает отдельный объект localStorage для каждого домена. Таким образом, редактирование и просмотр данных localStorage для домена stackdev.blog доступно только с этого домена.

LocalStorage setItem(): cохранить данные

В JavaScript доступен набор методов для работы с объектом localStorage . Для записи данных в local storage используется метод setItem() :

1localStorage.setItem('ключ','наше значение');

Данный код записывает в хранилище данных наши ключ и значение в строчном формате.

LocalStorage getItem(): получить данные

Метод getItem() используется для получения данных из хранилища localStorage :

1сonst data = localStorage.getItem('ключ'); 
2 
3 console.log(data); 
4 // "наше значение"

LocalStorage removeItem(): удалить данные

Мы можем легко удалить наши данные из localStorage . Для этого используется метод removeItem() , в который передается ключ сохраненных данных.

1localStorage.removeItem('ключ'); 
2сonst data = localStorage.getItem('ключ'); 
3 
4 console.log(data); 
5 // null

Как очистить localStorage?

Метод clear() позволяет полностью очистить весь объект локального хранилища для текущего домена. Это не затронет объекты localStorage других доменов.

LocalStorage length: узнать количество полей в хранилище

Чтобы узнать сколько полей (или ключей с данными) сейчас хранится в объекте localStorage текущего домена, можно использовать свойство length .

1console.log(localStorage.length); 
2 // 0

LocalStorage key(): получить данные по индексу ключа

Все ключи в localStorage хранятся в порядке их добавления. Индексное значение ключа, который был добавлен в хранилище первым будет 0 и так далее. Мы можем использовать метод key() , чтобы получить ключ по его индексу.

1localStorage.setItem('car', 'BMW') 
2 console.log(localStorage.key(0));

Когда ключей в объекте localStorage набирается много, можно использовать цикл для их перебора и получения данных для каждого ключа по его индексному значению:

1const storageLength = localStorage.length; 
2 
3 for (let i = 0; i  storageLength; i++)  
4 console.log( 
5 localStorage.getItem(localStorage.key(i)) 
6 ); 
7 >

Local Storage использует только строчный тип данных

Любой объект, который мы решим записать в хранилище localStorage , будет автоматически преобразован в строку. То есть браузер возьмет наш объект и применит к нему метод toString() .

1const car = brand: 'bmw', year: 2023>; 
2 
3 console.log(car.toString()) 
4 // "[object Object]"

То есть, если мы попробуем указать объект car в качестве значения при записи в LocalStorage — то в хранилище запишется некорректное значение.

1const car = brand: 'bmw', year: 2023>; 
2 localStorage.setItem('car', car); 
3 
4 const data = localStorage.getItem('car'); 
5 
6 console.log(data) 
7 // "[object Object]"

Чтобы корректно записать массивы или объекты в localStorage , их сначала необходимо преобразовать в строчный формат, например используя метод JSON.stringify() .

1const car = brand: 'bmw', year: 2023>; 
2 const carString = JSON.stringify(car); 
3 
4 console.log(carString); 
5 // '' 
6 
7 localStorage.setItem('car', carString);

Также при получении массива или объекта из localStorage потребуется сделать обратное преобразование с помощью метода JSON.parse() :

1const data = localStorage.getItem('car'); 
2 const carParsed = JSON.parse(data); 
3 
4 console.log(carParsed); 
5 // Object
 

LocalStorage: когда использовать?

Сохранение данных в онлайн формах

Есть несколько ситуаций, когда localStorage может сильно облегчить жизнь как пользователю так и разработчику.

Например, при заполнении длинных онлайн форм у пользователя может пропасть связь и все ранее заполненные данные пропадут.

В этом случае localStorage можно использовать для сохранения данных полей формы, по мере их заполнения. Заполненные данные никуда не пропадут.

После восстановления связи пользователь сможет продолжить заполнение формы.

Общие настройки личного кабинета

Еще одним примером использования localStorage может быть сохранение настроек каких-то элементов личного кабинета пользователя. Например, в одном из проектов приходилось сохранять расположение колонок и установленные фильтры пользователя для отображения данных в таблице.

Есть только 2 случая, когда данные могут быть стерты из localStorage :

• Был превышен лимита по размеру данных.
• Хранилище принудительно очищено с помощью кода или самим пользователем через вкладку Application.

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

Типы данных в JavaScript (8 типов + примеры)

Async Await в Javascript (как работает и примеры)

Популярные статьи

Источник

How to Set Expiry Time (TTL) for LocalStorage With Javascript

This post will explain how to implement expiry times for items stored in the browsers localStorage.

If you’re familiar with the browsers localStorage object, you know that there’s no provision for providing an expiry time. However, we can use Javascript to add a TTL (Time to live) to invalidate items in localStorage after a certain period of time elapses.

If you just want to see a working example, you can skip to the last section

1. Store the expected time of expiry along with the original information to be stored
2. When getting the item, compare the current time with the stored expiry time
3. If the current time is greater than to stored expiry time, return null and remove the item from storage, otherwise, return the original information.

Let’s see how we can implement this using Javascript.

Storing Items with Expiry Time#

Let’s create a function that allows you to set a key in localStorage, and store the expiry time along with it:

function setWithExpiry(key, value, ttl)   const now = new Date()   // `item` is an object which contains the original value  // as well as the time when it's supposed to expire  const item =   value: value,  expiry: now.getTime() + ttl,  >  localStorage.setItem(key, JSON.stringify(item)) > 

Here, we create a new object with the original value as well as the expiry time, which is calculated by adding the TTL value in milliseconds to the current millisecond time.

We convert the item to a JSON string, since we can only store strings in localStorage.

Getting Items From Storage#

We can verify the expiry time while retrieving items from the store:

function getWithExpiry(key)   const itemStr = localStorage.getItem(key)  // if the item doesn't exist, return null  if (!itemStr)   return null  >  const item = JSON.parse(itemStr)  const now = new Date()  // compare the expiry time of the item with the current time  if (now.getTime() > item.expiry)   // If the item is expired, delete the item from storage  // and return null  localStorage.removeItem(key)  return null  >  return item.value > 

Here we are expiring the item “lazily” — which is to say we check the expiry condition only when we want to retrieve it from storage. If the item has, in-fact expired, we remove the key from localStorage.

Full Example#

Let’s create a small HTML page which demonstrates how we can use localStorage with expiry:

1. The “Set” button store the value in the input box to localStorage with a 5 second expiry
2. The “Get” button fetches the value from localStorage and displays it below
3. We make use of the setWithExpiry and getWithExpiry functions defined in the script

 html lang="en">  head>  meta charset="UTF-8" />  meta name="viewport" content="width=device-width, initial-scale=1.0" />  meta http-equiv="X-UA-Compatible" content="ie=edge" />  title>LocalStorage Expiry Exampletitle>  head>   body>  button id="btn-set">Setbutton>  input id="input-set" />  br />br />  button id="btn-get">Getbutton>  div>Value: span id="value">span>div>   script>  const btnSet = document.getElementById("btn-set")  const btnGet = document.getElementById("btn-get")  const inputSet = document.getElementById("input-set")  const valueDisplay = document.getElementById("value")   btnSet.addEventListener("click", () =>   setWithExpiry("myKey", inputSet.value, 5000)  >)   btnGet.addEventListener("click", () =>   const value = getWithExpiry("myKey")  valueDisplay.innerHTML = value  >)   function setWithExpiry(key, value, ttl)   const now = new Date()   // `item` is an object which contains the original value  // as well as the time when it's supposed to expire  const item =   value: value,  expiry: now.getTime() + ttl,  >  localStorage.setItem(key, JSON.stringify(item))  >   function getWithExpiry(key)   const itemStr = localStorage.getItem(key)   // if the item doesn't exist, return null  if (!itemStr)   return null  >   const item = JSON.parse(itemStr)  const now = new Date()   // compare the expiry time of the item with the current time  if (now.getTime() > item.expiry)   // If the item is expired, delete the item from storage  // and return null  localStorage.removeItem(key)  return null  >  return item.value  >  script>  body>  html> 

Источник