frontend logo

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

Решать задачи

×

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.

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

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

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

Вам откроется табличка с двумя столбцами — 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!».

Запись LocalStorage — локальное хранилище в JavaScript впервые появилась Techrocks.

Похожие записи

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Современный подход к разработке с использованием Next.js