JavaScript - Storage API: руковод BEGINNERS

Привет, будущие супергерои кодирования! ? Сегодня мы окунемся в мир API хранилища JavaScript. Не волнуйтесь, если вы никогда не писали ни строчки кода - я буду вашим дружелюбным проводником на этом захватывающем пути. Поехали!

Что такое API веб-хранения?

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

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

Существует два основных типа веб-хранения:

1. localStorage
2. sessionStorage

Давайте рассмотрим каждый из них подробнее.

Объект Window localStorage

Что такое localStorage?

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

Как использовать localStorage

Вот простой пример того, как использовать localStorage:

// Хранение данных
localStorage.setItem("username", "CoolCoder123");

// Получение данных
let savedUsername = localStorage.getItem("username");
console.log(savedUsername); // Вывод: CoolCoder123

// Удаление данных
localStorage.removeItem("username");

// Очистка всех данных
localStorage.clear();

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

Объект Window sessionStorage

Что такое sessionStorage?

sessionStorage - это как forgetful cousin localStorage. Он хранит данные только для одной сессии. Когда вы закроете вкладку браузера, бац! Данные исчезнут.

Как использовать sessionStorage

Использование sessionStorage очень похоже на использование localStorage:

// Хранение данных
sessionStorage.setItem("tempScore", "1000");

// Получение данных
let currentScore = sessionStorage.getItem("tempScore");
console.log(currentScore); // Вывод: 1000

// Удаление данных
sessionStorage.removeItem("tempScore");

// Очистка всех данных
sessionStorage.clear();

Это很适合 для хранения временной информации, такой как счет в игре, который вам needed только пока игрок активно играет.

Cookie Vs localStorage Vs sessionStorage

Теперь сравним эти методы хранения с помощью забавной аналогии:

1. Cookies - это как липучие заметки. Они маленькие, могут быть прочитаны сервером и имеют срок действия.
2. localStorage - это как личный дневник. Он хранит много информации и держит ее долго.
3. sessionStorage - это как доска. Она хранит информацию временно и стирается, когда вы закончите.

Вот удобная таблица сравнения:

Функция	Cookies	localStorage	sessionStorage
Емкость	~4KB	~5MB	~5MB
Истекает	Установлено вручную	Никогда	При закрытии вкладки
Доступен серверу	Да	Нет	Нет
Отправляется с запросами	Да	Нет	Нет

Свойства и методы объекта хранения

Both localStorage и sessionStorage share the same methods and properties. Давайте рассмотрим их:

Свойства

1. length: Возвращает количество сохраненных элементов.

console.log(localStorage.length);

Методы

1. setItem(key, value): Добавляет парку ключ/значение в хранилище.
2. getItem(key): Получает значение, связанное с заданным ключом.
3. removeItem(key): Удаляет элемент, связанный с заданным ключом.
4. clear(): Удаляет все элементы из хранилища.
5. key(index): Возвращает имя ключа в указанном индексе.

Вот пример использования всех этих методов:

// Использование setItem
localStorage.setItem("fruit", "apple");
localStorage.setItem("vegetable", "carrot");

// Использование getItem
console.log(localStorage.getItem("fruit")); // Вывод: apple

// Использование key
console.log(localStorage.key(0)); // Вывод: fruit (или vegetable, порядок не гарантируется)

// Использование length
console.log(localStorage.length); // Вывод: 2

// Использование removeItem
localStorage.removeItem("vegetable");

// Использование clear
localStorage.clear();

И вот вы уже сделали свои первые шаги в мир веб-хранения. Помните, что практика makes perfect. Попробуйте создать простой веб-страницу и поэкспериментировать с этими методами хранения. Может быть, создайте小游戏, который запоминает высокий счет игрока с помощью localStorage?

Before I sign off, here's a little coding joke for you:

Why do programmers prefer dark mode? Because light attracts bugs! ??

Счастливого кодирования, и помните - каждый expert был когда-то beginner. Keep learning, keep coding, and most importantly, have fun!

Credits: Image by storyset