Основы работы с локальным хранилищем в JavaScript

Сейчас мы с вами разберемся со специальным объектом localStorage, позволяющим хранить данные между заходами пользователя на ваш сайт (5-10 мегабайт информации). Данные хранятся в специальном месте браузера под названием локальное хранилище.

Доступ к данным производится по ключу: вы сохраняете данные с каким-то ключом, а затем можете получить их по этому ключу или удалить. При этом разрешено сохранять только строки. Для работы с данными есть специальные методы. Давайте их рассмотрим.

Сохранение и получение данных

Метод setItem предназначен для сохранения данных. Первым параметром он принимает ключ, а вторым - значение. Метод getItem предназначен для получения данных. Он принимает один параметр - ключ, под которым эти данные были сохранены.

Давайте попробуем эти методы на практике. Для начала давайте сохраним какую-нибудь строку с каким-нибудь ключом:

localStorage.setItem('key', 'hello'); // сохраняем с ключом 'key'

Скопируйте приведенный код и запустите его. В результате строка 'hello' сохранится с ключом 'key'.

Давайте теперь получим нашу строку из локального хранилища:

let str = localStorage.getItem('key'); // получаем данные по ключу
console.log(str); // выведет 'hello'

Напишите скрипт, который сохранит в локальном хранилище три числа под тремя разными ключами. Запустите этот скрипт, чтобы данные сохранились. Затем напишите скрипт, который получит ваши три числа из локального хранилища и найдет их сумму. Запустите второй скрипт и убедитесь в его работоспособности.

Однократное сохранение

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

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

let time = localStorage.getItem('time');

if (time === null) {
	let now = ( new Date() ).getTime();
	localStorage.setItem('time', now);
}

Перепишем условие в более коротком виде:

let time = localStorage.getItem('time');

if (!time) {
	let now = ( new Date() ).getTime();
	localStorage.setItem('time', now);
}

По заходу пользователя на сайт запишите в локальное хранилище текущий момент времени. Затем по повторному заходу выведите, сколько прошло времени с предыдущего захода пользователя на сайт.

По заходу пользователя на сайт спросите у него дату рождения. При следующем заходе пользователя на сайт, если у него в этот день будет День Рождения - поздравьте его с этим праздником.

Дан инпут. По потери фокуса в этом инпуте сохраните его значение в локальное хранилище. При следующем заходе пользователя на страницу установите в инпуте сохраненный ранее текст.

Перезапись данных

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

localStorage.setItem('key', 1);
let value = localStorage.getItem('key');
console.log(value); // выведет 1

localStorage.setItem('key', 2);
let value = localStorage.getItem('key');
console.log(value); // выведет 2

localStorage.setItem('key', 3);
let value = localStorage.getItem('key');
console.log(value); // выведет 3

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

Удаление данных

С помощью метода removeItem можно удалять данные и связанный с ними ключ. Смотрите пример:

localStorage.removeItem('key');

let value = localStorage.getItem('key');
console.log(value); // выведет null

Модифицируйте предыдущую задачу. Сделайте так, чтобы счетчик обнулялся после того, как дойдет до 100.

Удаление всех данных

С помощью метода clear можно очистить все хранилище. Смотрите пример:

localStorage.clear();

Очистите хранилище. Проверьте, что все ранее установленные вами ключи пропали.