LocalStorage — локальное хранилище в JavaScript

От /

На заре интернета для хранения данных вам нужен был сервер. Сегодня локальное хранилище (LocalStorage) позволяет хранить данные в браузерах и приложениях, не обращаясь к бэкенд-серверу.

В этой статье я расскажу, как LocalStorage применяется в теории и на практике.

Давайте разберемся с веб-хранилищем

Прежде чем перейти к основной теме, давайте остановимся на определении веб-хранилища. Веб-хранилище — одна из наилучших функций HTML5. Она позволяет веб-приложениям сохранять данные локально, в браузере пользователя.

Веб-хранилище имеет две основные формы — локальное и сессионное хранилище (соотв. LocalStorage и Session Storage). Ключевая разница между ними состоит в том, что данные, сохраненные в LocalStorage, остаются в браузере до тех пор, пока их оттуда не удалят намеренно. А вот данные, сохраненные в Session Storage, удаляются после закрытия вкладки или окна браузера.

Что собой представляет локальное хранилище (LocalStorage)?

Как мы уже выяснили, локальное хранилище — одна из форм веб-хранилища, предоставляемая браузером. LocalStorage позволяет веб-приложениям хранить данные локально, в браузере пользователя, причем без ограничения по времени. В результате сохраненные данные остаются доступными, даже если закрыть вкладку или окно браузера.

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

Применение LocalStorage

Давайте рассмотрим несколько стандартных вариантов использования локального хранилища.

1. Сохранение заполненных форм

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

2. Кеширование

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

3. База данных для простых приложений

Как уже упоминалось, раньше для доступа к хранилищу данных нужно было коммуницировать с базой данных в бэкенде. Но теперь LocalStorage позволяет хранить данные прямо во фронтенде. То есть LocalStorage может служить «маленькой» базой данных для какого-нибудь простого приложения.

Доступ к LocalStorage

Получить доступ к LocalStorage довольно просто, нужно выполнить всего несколько шагов:

1. Переходите на любой сайт или в любое веб-приложение. Открываете консоль браузера (кнопка F12).

2. Переходите на вкладку Application. В меню слева, в разделе Storage, вы увидите LocalStorage.

3. Кликаете элемент в выпадающем меню.

Вам откроется табличка с двумя столбцами — key и value. Здесь LocalStorage и хранит все нужные данные.

Как использовать локальное хранилище

Для работы с данными в LocalStorage можно использовать следующие методы:

МетодОписание
setItem()Сохранение данных в LocalStorage
getItem()Получение данных из LocalStorage
removeItem()Удаление данных в LocalStorage по ключу
key()Получение данных из LocalStorage по индексу

setItem( )

Этот метод используется для сохранения данных в LocalStorage. В качестве первого аргумента он принимает ключ, а в качестве второго — значение.

Давайте добавим данные в LocalStorage.

localStorage.setItem("name", "Mandy");
// Здесь name - ключ, а Mandy - значение

Как уже упоминалось, LocalStorage хранит данные как строки. Если вы хотите сохранить объекты или массивы, нужно конвертировать их в строки при помощи метода JSON.stringify().

Посмотрим, как это работает…

// Сохранение объектов в LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

// Сохранение массивов/списокв в LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

getItem()

Метод getItem() используется для извлечения данных из локального хранилища. Он принимает один параметр — ключ, который использовался при сохранении данных.

Например, для получения таких данных, как объект user, нужно написать следующий код:

localStorage.getItem("user-info");

Этот код вернет строку JSON:

"{name:"Mandy", age:"23"}"

Затем ее нужно конвертировать в объект при помощи метода JSON.parse().

JSON.parse(localStorage.getItem('user-info'));

removeItem()

Метод removeItem() позволяет удалить данные из LocalStorage. В качестве параметра этот метод принимает ключ.

Для примера удалим из локального хранилища объект user:

localStorage.removeItem("user-info");

key()

При помощи key(index) можно получить данные из LocalStorage. При этом index представляет порядковый номер данных, которые вы хотите получить.

localStorage.key(2);

clear()

Метод clear() применяется для удаления всех данных из LocalStorage.

localStorage.clear()

Проект

Теперь, когда вы познакомились с основными методами для работы с данными в локальном хранилище, давайте попрактикуемся. Мы создадим веб-приложение, где пользователи смогут:

  • сохранять данные в LocalStorage
  • извлекать эти данные
  • удалять данные по ключу
  • удалять все данные из хранилища.

Начнем с создания новой папки в редакторе кода. Далее создаем три файла: index.html, style.css и main.js.

Файл index.html будет содержать HTML-разметку нашего веб-приложения. HTML-код представляет собой форму с различными полями ввода и кнопками.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Local Storage</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="form">
      <form id="userForm">
        <h1>LocalStorage Application</h1>
        <label for="userName">User</label>
        <input
          type="text"
          id="userName"
          placeholder="Enter user name"
          required
          autofocus
        /><br />
        <label for="age">Age</label>
        <input
          type="number"
          id="age"
          placeholder="Enter user age"
          required
        /><br />
        <label for="key">Key</label>
        <input type="text" id="key" placeholder="Enter key" required /><br />
        <button type="submit">Save user</button>
      </form>
      <br />
      <label for="key">Enter Key to retrieve user</label>
      <input
        type="text"
        id="retrieveKey"
        placeholder="Enter key to access user"
        required
      /><br />
      <button id="retrieveButton">Retrieve user</button>
      <br />
      <div id="userData"></div>
      <br />
      <label for="removeKey">Enter Key to delete user</label>
      <input
        type="text"
        id="removeKey"
        placeholder="removeKey"
        required
      /><br />
      <button id="removeButton">Delete user</button>
      <br />
      <button id="clearButton">Delete all users</button>
    </div>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

А вот CSS.

/* base styles  */
html {
  font-size: 67.5%;
}
body {
  font-size: 1.6rem;
  padding: 0;
  margin: 0;
}

/* form   */
#form {
  margin-left: 2rem;
}

Файл main.js содержит все функции для сохранения, извлечения и удаления данных из LocalStorage.

// Сохранение пользовательских данных в localStorage
function store() {
  var userName = document.getElementById("userName").value;
  var age = document.getElementById("age").value;
  var key = document.getElementById("key").value;

  const user = {
    userName,
    age,
  };

  // Конвертация объекта в строку и сохранение строки
  localStorage.setItem(key, JSON.stringify(user));
}

// Получение пользовательских данных из localStorage
function retrieveUserData() {
  let key = document.getElementById("retrieveKey").value;
  console.log("retrive records");
  let userData = localStorage.getItem(key); //searches for the key in localStorage
  let paragraph = document.createElement("p");
  let info = document.createTextNode(userData);
  paragraph.appendChild(info);
  let element = document.getElementById("userData");
  element.appendChild(paragraph);
  retrieveKey.value = "";
}

// Удаление пользовательских данных из localStorage
function removeUserData() {
  var removeKey = document.getElementById("removeKey").value;
  localStorage.removeItem(removeKey);
  removeKey.value = "";
}

// Удаление всех пользовательских данных из localStorage
function deleteAllUserData() {
  localStorage.clear();
}

// Проверка полной загрузки страницы перед выполнением функций
window.onload = function () {
  document.getElementById("userForm").onsubmit = store;
  document.getElementById("clearButton").onclick = deleteAllUserData;
  document.getElementById("removeButton").onclick = removeUserData;
  document.getElementById("retrieveButton").onclick = retrieveUserData;
};

Результаты

Итоговый результат можно посмотреть в видео:

Важные примечания

  • Локальное хранилище не защищает данные, а значит, не является безопасным местом для хранения конфиденциальной информации.
  • LocalStorage может хранить в браузере максимум 5MB данных.

От редакции Techrocks: также предлагаем почитать «LocalStorage vs Cookies: все, что нужно знать о безопасном хранении токенов JWT во Front-End».

Заключение

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

Перевод статьи «JavaScript Local Storage Explained!».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх