LocalStorage JavaScript в двух словах

Что такое localStorage (Локальное хранилище) в JavaScript? LocalStorage позволяет хранить какую либо информацию прямо в браузере пользователя, в виде ключ-значение. Эта информацию сохраняется после обновления страницы и даже после перезагрузки браузера.

У объекта хранилища localStorage есть следующие методы и свойства:

setItem(key, value) – записать пару ключ/значение.

getItem(key) – получить данные по ключу key.

removeItem(key) – удалить данные с ключом key.

clear() – удалить всё.

key(index) – получить ключ на заданной позиции.

length – количество элементов в хранилище.

Пример использования localStorage

Для примера использования localStorage сделаем простую страницу содержащую заголовок h1, форму ввода input и кнопку. В форму ввода мы будем вводить произвольный текст и, после нажатия кнопки, данные будут записываться в localStorage. После перезагрузки страницы мы будем видеть заголовок, который будет подгружаться из localStorage.

Пример использования localStorage

Итак код index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>

</head>
<body>

<h1>Пример localStorage</h1>

<input type="text">
<button>Изменить заголовок</button>

<script src="script.js"></script>
</body>
</html>

Код script.js:

document.querySelector('button').addEventListener('click', function () {

    let value = document.querySelector('input').value;

    // Записываем данные input в localStorage с ключом h1Text
    localStorage.setItem('h1Text', value);

});


document.addEventListener('DOMContentLoaded', function(){

    // Получаем данные из localStorage по ключу h1Text
    let h1Text = localStorage.getItem('h1Text');

    if (h1Text && h1Text.trim()){
        document.querySelector('h1').textContent = h1Text;
    }

});

Здесь используется только два метода:

  • setItem для записи данных input в localStorage с ключом h1Text;
  • getItem для получения данных из localStorage по ключу h1Text;

Если попробовать ввести текст в поле input, нажать на кнопку «Изменить заголовок» и обновить страницу, мы увидим новый текст в заголовке h1, который мы получили из localStorage.

Доступ к localStorage из браузера

Чтобы посмотреть содержимое localStorage можно воспользоваться панелью разработчика (DevTools) браузера, далее выбрать вкладку Application / Local Storage (Приложение / Локальное хранилище) и мы увидим все данные.

Доступ к localStorage из браузера

Добавить комментарий