На заре Интернета сервер был единственным способом для хранения данных. В современных браузерах нам стало доступно хранилище 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
3console.log(data);
4//  "наше значение"

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

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

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

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

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

1localStorage.clear();

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

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

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

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

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

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

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

1const storageLength = localStorage.length;
2
3for (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
3console.log(car.toString())
4// "[object Object]"

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

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

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

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

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

1const data = localStorage.getItem('car');
2const carParsed = JSON.parse(data);
3
4console.log(carParsed);
5// Object { brand: "bmw", year: 2023 }

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

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

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

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

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

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

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

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

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

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

Проект

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