🛠️LocalStorage SessionStorage в JavaScript

🛠️LocalStorage

📌 Описание

LocalStorage — это веб-API, который позволяет хранить данные в браузере пользователя. Данные сохраняются в виде пар "ключ-значение" и могут быть доступны даже после закрытия вкладки или браузера. LocalStorage имеет ограничение на объем хранимых данных (обычно около 5-10 МБ).

📌 Основные методы

setItem(key, value) - Сохраняет значение по указанному ключу.

getItem(key) - Получает значение по указанному ключу.

removeItem(key) - Удаляет значение по указанному ключу.

clear() - Удаляет все данные из LocalStorage.

key(index) - Возвращает имя ключа по его индексу.

length - Возвращает количество элементов в LocalStorage.

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

Пример 1: Сохранение данных

// Сохранение данных
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('age', '30');

Пример 2: Получение данных

// Получение данных
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');

console.log(username); // JohnDoe
console.log(age); // 30

Пример 3: Удаление данных

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

Пример 4: Очистка LocalStorage

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

Пример 5: Перебор всех элементов

// Перебор всех элементов в LocalStorage
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
console.log(`${key}: ${value}`);
}

📌 Примечания

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

Пример сохранения объекта

const user = {
name: 'John Doe',
age: 30
};

// Сохранение объекта
localStorage.setItem('user', JSON.stringify(user));

// Получение объекта
const retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // John Doe

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

🛠️ SessionStorage

📌 Описание

SessionStorage — это веб-API, позволяющее хранить данные в браузере на время сессии. Данные, сохраненные в SessionStorage, доступны только в рамках одной вкладки или окна браузера и удаляются, когда вкладка или окно закрываются. Это делает SessionStorage идеальным для временного хранения данных, которые не нужно сохранять после закрытия страницы.

📌 Основные методы

еsetItem(key, value) - Сохраняет значение по указанному ключу.

getItem(key) - Получает значение по указанному ключу.

removeItem(key) - Удаляет значение по указанному ключу.

clear() - Удаляет все данные из SessionStorage.

key(index) - Возвращает имя ключа по его индексу.

length - Возвращает количество элементов в SessionStorage.

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

Пример 1: Сохранение данных

// Сохранение данных
sessionStorage.setItem('sessionUser', 'JaneDoe');
sessionStorage.setItem('sessionAge', '25');

Пример 2: Получение данных

// Получение данных
const sessionUser = sessionStorage.getItem('sessionUser');
const sessionAge = sessionStorage.getItem('sessionAge');

console.log(sessionUser); // JaneDoe
console.log(sessionAge); // 25

Пример 3: Удаление данных

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

Пример 4: Очистка SessionStorage

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

Пример 5: Перебор всех элементов

// Перебор всех элементов в SessionStorage
for (let i = 0; i < sessionStorage.length; i++) {
const key = sessionStorage.key(i);
const value = sessionStorage.getItem(key);
console.log(`${key}: ${value}`);
}

📌 Примечания

• Данные в SessionStorage также хранятся в виде строк. Для хранения объектов используйте JSON.stringify() и JSON.parse(), как и в случае с LocalStorage.

Пример сохранения объекта

const sessionData = {
name: 'Jane Doe',
age: 25
};

// Сохранение объекта
sessionStorage.setItem('sessionData', JSON.stringify(sessionData));

// Получение объекта
const retrievedSessionData = JSON.parse(sessionStorage.getItem('sessionData'));
console.log(retrievedSessionData.name); // Jane Doe

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