В HTML5 localStorage это термин, используемый для обозначения простой "ключ-значение" базы данных в браузере (или, если более точно, на жестком диске компьютера, планшета или смартфона, где работает браузер), к которой мы можем получить доступ из JavaScript.

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

examples/js/counter_on_load.html

<div id="counter"></div>

<script>
var n = localStorage.getItem('on_load_counter');

if (n === null) {
    n = 0;
}

n++;

localStorage.setItem("on_load_counter", n);

document.getElementById('counter').innerHTML = n;
</script>

Try!

Нажмите на Try!, чтобы увидеть, как это работает (откроется в отдельном окне).

Пример содержит единственный HTML элемент div, который имеет уникальный ID counter и немного JavaScript. Метод getItem из класса localStorage запросит текущее значение для полученного ключа (в этом случае 'on_load_counter') и присвоит его к n.

В первый раз, когда мы загрузим эту страницу, мы не получим значение для ключа, а вместо этого getItem вернет null.

Затем, если мы получили действительно null, мы установим наш счетчик в 0.

Затем увеличиваем счетчик n++;.

Затем используем метод setItem класса localStorage, чтобы установить значение для ключа 'on_load_counter' в то, что сейчас в n

Заключительный шаг - показ нового значения на HTML странице. document.getElementById('counter') предоставляет доступ к элементу с id counter, содержимое которого мы заменяем на значение в n.

Сброс счетчика

В следующем примере мы собираемся добавить кнопку сброса счетчика. Но для начала посмотрим кое-что другое. Если вы нажмете на Try!, в новом окне откроется другой пример (URL будет другой, но страница находится на том же самом сайте). Вы увидите счетчик на этой странице, начинающийся со значения, которое было на первой странице (в первом примере). На самом деле, если вы по очереди будете посещать эти две страницы, то увидите, что на самом деле, они ссылаются на один и тот же счетчик (на то же самое место в локальном хранилище).

examples/js/counter_on_load_reset.html

<div id="counter"></div>
<button id="reset">Reset</button>

<script>
var n = localStorage.getItem('on_load_counter');

if (n === null) {
    n = 0;
}

n++;

localStorage.setItem("on_load_counter", n);

document.getElementById('counter').innerHTML = n;


function reset_counter() {
    localStorage.removeItem('on_load_counter');
}

document.getElementById('reset').addEventListener('click', reset_counter);
</script>

Try!

В этом примере мы добавили другой HTML элемент - button с ID reset. В коде JavaScript мы добавили функцию reset_counter, которая при вызове будет использовать метод removeItem класса localStorage, чтобы удалить пару ключ-значение из локального хранилища.

В последней строке мы снова вызываем document.getElementById('reset'), чтобы идентифицировать нашу кнопку, затем добавляем обработчик события с помощью метода addEventListener. Это заставит JavaScript вызывать функцию reset_counter каждый раз, когда переданный элемент HTML (кнопка 'reset') будет нажат.

Если вы откроете пример, нажав по ссылке Try!, то увидите счетчик и кнопку. Когда вы нажмете на кнопку, то вам покажется, что ничего не произошло. Это потому, что мы не обновили страницу после сброса счетчика. Единственная вещь, которая на самом деле произошла - мы удалили пару ключ-значение из локального хранилища.

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