localStorage - JS & jQuery / JavaScript / Статьи

Полное руководство по localStorage

localStorage - это часть Web Storage API, которая позволяет хранить данные на стороне клиента в браузере объёмом 5 мегабайт. В этой статье мы рассмотрим более 100 примеров использования localStorage с помощью JavaScript и jQuery.

Разница между JavaScript и jQuery для работы с localStorage

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

Чистый JavaScript

JavaScript - это нативный язык программирования, который предоставляет прямые методы для работы с localStorage.

Преимущества:

Высокая производительность.
Не требует дополнительных библиотек.
Универсальность - работает в любом современном браузере.

Недостатки:

Более многословный синтаксис для работы с DOM.

Пример:


document.addEventListener('DOMContentLoaded', function() {
 localStorage.setItem('theme', 'light');
 let theme = localStorage.getItem('theme');
 document.body.style.backgroundColor = theme === 'light' ? '#fff' : '#333';
});

jQuery

jQuery - это библиотека, которая упрощает работу с DOM и событиями, но не предоставляет специальных методов для localStorage.

Преимущества:

Упрощает манипуляции с DOM и обработку событий.
Более компактный и читаемый синтаксис.

Недостатки:

Требует подключения библиотеки.
Незначительный оверхед по производительности.

Пример:


$(document).ready(function() {
 localStorage.setItem('theme', 'light');
 let theme = localStorage.getItem('theme');
 $('body').css('background-color', theme === 'light' ? '#fff' : '#333');
});

Сравнение JavaScript и jQuery

Критерий	Чистый JavaScript	jQuery
Скорость	Быстрее, так как это нативный код.	Медленнее из-за оверхеда библиотеки.
Удобство работы с DOM	Требует больше кода для манипуляций с DOM.	Упрощает манипуляции с DOM и обработку событий.
Зависимости	Не требует дополнительных библиотек.	Требует подключения jQuery.
Читаемость кода	Более многословный синтаксис.	Более компактный и читаемый синтаксис.
Универсальность	Работает везде, где поддерживается JavaScript.	Требует поддержки jQuery в проекте.

Когда использовать JavaScript, а когда jQuery?

Используйте чистый JavaScript, если вам не нужны дополнительные функции jQuery, вы хотите максимально оптимизировать производительность или работаете в среде, где подключение jQuery нежелательно.

Используйте jQuery, если вы уже используете его в проекте для других задач (например, для работы с DOM или анимациями) или хотите упростить обработку событий и динамическое обновление интерфейса на основе данных из localStorage.

Примеры на JavaScript:

Сохранение данных (JavaScript)


localStorage.setItem('username', 'JohnDoe');

Получение данных (JavaScript)


let username = localStorage.getItem('username');
console.log(username); // JohnDoe

Удаление данных (JavaScript)


localStorage.removeItem('username');

Очистка всех данных (JavaScript)


localStorage.clear();

Сохранение объекта (JavaScript)


let user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

Получение объекта (JavaScript)


let savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // John

Проверка наличия ключа (JavaScript)


if (localStorage.getItem('username') === null) {
 console.log('Ключ не найден');
}

Перебор всех ключей (JavaScript)


for (let i = 0; i < localStorage.length; i++) {
 let key = localStorage.key(i);
 console.log(key, localStorage.getItem(key));
}

Сохранение массива (JavaScript)


let colors = ['red', 'green', 'blue'];
localStorage.setItem('colors', JSON.stringify(colors));

Получение массива (JavaScript)


let savedColors = JSON.parse(localStorage.getItem('colors'));
console.log(savedColors); // ['red', 'green', 'blue']

Сохранение числа (JavaScript)


localStorage.setItem('age', 25);

Получение числа (JavaScript)


let age = parseInt(localStorage.getItem('age'));
console.log(age); // 25

Сохранение булевого значения (JavaScript)


localStorage.setItem('isActive', true);

Получение булевого значения (JavaScript)


let isActive = localStorage.getItem('isActive') === 'true';
console.log(isActive); // true

Сохранение даты (JavaScript)


localStorage.setItem('lastLogin', new Date().toISOString());

Получение даты (JavaScript)


let lastLogin = new Date(localStorage.getItem('lastLogin'));
console.log(lastLogin);

Сохранение HTML-кода (JavaScript)


localStorage.setItem('htmlContent', 'Hello World');

Получение HTML-кода (JavaScript)


let htmlContent = localStorage.getItem('htmlContent');
document.body.innerHTML += htmlContent;

Сохранение JSON (JavaScript)


localStorage.setItem('config', JSON.stringify({ theme: 'dark', lang: 'ru' }));

Получение JSON (JavaScript)


let config = JSON.parse(localStorage.getItem('config'));
console.log(config.theme); // dark

Сохранение большого текста (JavaScript)


localStorage.setItem('longText', 'Lorem ipsum dolor sit amet...');

Получение большого текста (JavaScript)


let longText = localStorage.getItem('longText');
console.log(longText);

Сохранение данных с истекающим сроком (JavaScript)


let data = { value: 'Some data', expires: Date.now() + 3600000 }; // 1 час
localStorage.setItem('tempData', JSON.stringify(data));

Проверка срока действия данных (JavaScript)


let tempData = JSON.parse(localStorage.getItem('tempData'));
if (tempData && tempData.expires > Date.now()) {
 console.log(tempData.value); // Some data
} else {
 localStorage.removeItem('tempData');
}

Сохранение данных с шифрованием (базовый пример) (JavaScript)


localStorage.setItem('encryptedData', btoa('Secret Data'));

Получение зашифрованных данных (JavaScript)


let encryptedData = atob(localStorage.getItem('encryptedData'));
console.log(encryptedData); // Secret Data

Сохранение данных с уникальным ключом (JavaScript)


let uniqueKey = 'user_' + Date.now();
localStorage.setItem(uniqueKey, 'Unique Data');

Получение данных по уникальному ключу (JavaScript)


let uniqueData = localStorage.getItem(uniqueKey);
console.log(uniqueData); // Unique Data

Сохранение данных с префиксом (JavaScript)


localStorage.setItem('app_settings_theme', 'dark');

Получение всех данных с префиксом (JavaScript)


for (let i = 0; i < localStorage.length; i++) {
 let key = localStorage.key(i);
 if (key.startsWith('app_settings_')) {
 console.log(key, localStorage.getItem(key));
 }
}

Сохранение данных с ограничением по размеру (JavaScript)


function saveLargeData(key, data) {
 try {
 localStorage.setItem(key, data);
 } catch (e) {
 console.error('Ошибка сохранения: ', e);
 }
}
saveLargeData('largeData', '...');

Получение данных с проверкой на null (JavaScript)


let data = localStorage.getItem('nonExistentKey');
if (data !== null) {
 console.log(data);
} else {
 console.log('Данные отсутствуют');
}

Сохранение данных с метаинформацией (JavaScript)


let metaData = { created: Date.now(), author: 'Admin' };
localStorage.setItem('metaInfo', JSON.stringify(metaData));

Получение метаинформации (JavaScript)


let metaInfo = JSON.parse(localStorage.getItem('metaInfo'));
console.log(metaInfo.author); // Admin

Сохранение данных с версией (JavaScript)


let versionedData = { version: 1, content: 'Some content' };
localStorage.setItem('versionedData', JSON.stringify(versionedData));

Получение данных с проверкой версии (JavaScript)


let savedVersionedData = JSON.parse(localStorage.getItem('versionedData'));
if (savedVersionedData.version === 1) {
 console.log(savedVersionedData.content); // Some content
}

Сохранение данных с таймером (JavaScript)


let timedData = { value: 'Timed Data', timestamp: Date.now() };
localStorage.setItem('timedData', JSON.stringify(timedData));

Получение данных с проверкой времени (JavaScript)


let savedTimedData = JSON.parse(localStorage.getItem('timedData'));
if (Date.now() - savedTimedData.timestamp < 60000) { // 1 минута
 console.log(savedTimedData.value); // Timed Data
}

Сохранение данных с инкрементным ключом (JavaScript)


let counter = localStorage.getItem('counter') || 0;
localStorage.setItem('data_' + counter, 'Data ' + counter);
localStorage.setItem('counter', ++counter);

Получение данных с инкрементным ключом (JavaScript)


for (let i = 0; i < counter; i++) {
 console.log(localStorage.getItem('data_' + i));
}

Сохранение данных с проверкой на дубликаты (JavaScript)


let items = JSON.parse(localStorage.getItem('items')) || [];
if (!items.includes('New Item')) {
 items.push('New Item');
 localStorage.setItem('items', JSON.stringify(items));
}

Получение данных с фильтрацией (JavaScript)


let filteredItems = items.filter(item => item.startsWith('New'));
console.log(filteredItems);

Сохранение данных с сортировкой (JavaScript)


let sortedItems = items.sort();
localStorage.setItem('sortedItems', JSON.stringify(sortedItems));

Получение отсортированных данных (JavaScript)


let savedSortedItems = JSON.parse(localStorage.getItem('sortedItems'));
console.log(savedSortedItems);

Сохранение данных с группировкой (JavaScript)


let groupedData = { group1: ['Item1', 'Item2'], group2: ['Item3'] };
localStorage.setItem('groupedData', JSON.stringify(groupedData));

Получение сгруппированных данных (JavaScript)


let savedGroupedData = JSON.parse(localStorage.getItem('groupedData'));
console.log(savedGroupedData.group1); // ['Item1', 'Item2']

Сохранение данных с индексацией (JavaScript)


let indexedData = { index1: 'Value1', index2: 'Value2' };
localStorage.setItem('indexedData', JSON.stringify(indexedData));

Получение данных по индексу (JavaScript)


let savedIndexedData = JSON.parse(localStorage.getItem('indexedData'));
console.log(savedIndexedData.index1); // Value1

Сохранение данных с преобразованием (JavaScript)


let transformedData = { original: 'Data', transformed: btoa('Data') };
localStorage.setItem('transformedData', JSON.stringify(transformedData));

Получение преобразованных данных (JavaScript)


let savedTransformedData = JSON.parse(localStorage.getItem('transformedData'));
console.log(atob(savedTransformedData.transformed)); // Data

Сохранение данных с обработкой ошибок (JavaScript)


try {
 localStorage.setItem('importantData', 'Critical Information');
} catch (e) {
 console.error('Ошибка сохранения данных: ', e);
}

Получение данных с обработкой ошибок (JavaScript)


try {
 let data = localStorage.getItem('importantData');
 if (data === null) {
 console.log('Данные отсутствуют');
 } else {
 console.log(data);
 }
} catch (e) {
 console.error('Ошибка получения данных: ', e);
}

Сохранение данных с автоматическим удалением через время (JavaScript)


let data = { value: 'Temporary Data', expires: Date.now() + 60000 }; // 1 минута
localStorage.setItem('tempData', JSON.stringify(data));

setTimeout(() => {
 localStorage.removeItem('tempData');
 console.log('Данные удалены');
}, 60000);

Примеры на jQuery:

Сохранение данных (jQuery)


$(document).ready(function() {
 localStorage.setItem('theme', 'dark');
});

Получение данных (jQuery)


$(document).ready(function() {
 let theme = localStorage.getItem('theme');
 console.log(theme); // dark
});

Удаление данных (jQuery)


$(document).ready(function() {
 localStorage.removeItem('theme');
});

Очистка всех данных (jQuery)


$(document).ready(function() {
 localStorage.clear();
});

Сохранение объекта (jQuery)


$(document).ready(function() {
 let settings = { theme: 'light', fontSize: 14 };
 localStorage.setItem('settings', JSON.stringify(settings));
});

Получение объекта (jQuery)


$(document).ready(function() {
 let savedSettings = JSON.parse(localStorage.getItem('settings'));
 console.log(savedSettings.theme); // light
});

Проверка наличия ключа (jQuery)


$(document).ready(function() {
 if (localStorage.getItem('theme') === null) {
 console.log('Ключ не найден');
 }
});

Перебор всех ключей (jQuery)


$(document).ready(function() {
 $.each(localStorage, function(key, value) {
 console.log(key, value);
 });
});

Сохранение массива (jQuery)


$(document).ready(function() {
 let tasks = ['Task 1', 'Task 2', 'Task 3'];
 localStorage.setItem('tasks', JSON.stringify(tasks));
});

Получение массива (jQuery)


$(document).ready(function() {
 let savedTasks = JSON.parse(localStorage.getItem('tasks'));
 console.log(savedTasks); // ['Task 1', 'Task 2', 'Task 3']
});

Сохранение числа (jQuery)


$(document).ready(function() {
 localStorage.setItem('age', 25);
});

Получение числа (jQuery)


$(document).ready(function() {
 let age = parseInt(localStorage.getItem('age'));
 console.log(age); // 25
});

Сохранение булевого значения (jQuery)


$(document).ready(function() {
 localStorage.setItem('isActive', true);
});

Получение булевого значения (jQuery)


$(document).ready(function() {
 let isActive = localStorage.getItem('isActive') === 'true';
 console.log(isActive); // true
});

Сохранение даты (jQuery)


$(document).ready(function() {
 localStorage.setItem('lastLogin', new Date().toISOString());
});

Получение даты (jQuery)


$(document).ready(function() {
 let lastLogin = new Date(localStorage.getItem('lastLogin'));
 console.log(lastLogin);
});

Сохранение HTML-кода (jQuery)


$(document).ready(function() {
 localStorage.setItem('htmlContent', 'Hello World');
});

Получение HTML-кода (jQuery)


$(document).ready(function() {
 let htmlContent = localStorage.getItem('htmlContent');
 $('body').append(htmlContent);
});

Сохранение JSON (jQuery)


$(document).ready(function() {
 localStorage.setItem('config', JSON.stringify({ theme: 'dark', lang: 'ru' }));
});

Получение JSON (jQuery)


$(document).ready(function() {
 let config = JSON.parse(localStorage.getItem('config'));
 console.log(config.theme); // dark
});

Сохранение большого текста (jQuery)


$(document).ready(function() {
 localStorage.setItem('longText', 'Lorem ipsum dolor sit amet...');
});

Получение большого текста (jQuery)


$(document).ready(function() {
 let longText = localStorage.getItem('longText');
 console.log(longText);
});

Сохранение данных с истекающим сроком (jQuery)


$(document).ready(function() {
 let data = { value: 'Some data', expires: Date.now() + 3600000 }; // 1 час
 localStorage.setItem('tempData', JSON.stringify(data));
});

Проверка срока действия данных (jQuery)


$(document).ready(function() {
 let tempData = JSON.parse(localStorage.getItem('tempData'));
 if (tempData && tempData.expires > Date.now()) {
 console.log(tempData.value); // Some data
 } else {
 localStorage.removeItem('tempData');
 }
});

Сохранение данных с шифрованием (базовый пример) (jQuery)


$(document).ready(function() {
 localStorage.setItem('encryptedData', btoa('Secret Data'));
});

Получение зашифрованных данных (jQuery)


$(document).ready(function() {
 let encryptedData = atob(localStorage.getItem('encryptedData'));
 console.log(encryptedData); // Secret Data
});

Сохранение данных с уникальным ключом (jQuery)


$(document).ready(function() {
 let uniqueKey = 'user_' + Date.now();
 localStorage.setItem(uniqueKey, 'Unique Data');
});

Получение данных по уникальному ключу (jQuery)


$(document).ready(function() {
 let uniqueData = localStorage.getItem(uniqueKey);
 console.log(uniqueData); // Unique Data
});

Сохранение данных с префиксом (jQuery)


$(document).ready(function() {
 localStorage.setItem('app_settings_theme', 'dark');
});

Получение всех данных с префиксом (jQuery)


$(document).ready(function() {
 for (let i = 0; i < localStorage.length; i++) {
 let key = localStorage.key(i);
 if (key.startsWith('app_settings_')) {
 console.log(key, localStorage.getItem(key));
 }
 }
});

Сохранение данных с ограничением по размеру (jQuery)


$(document).ready(function() {
 function saveLargeData(key, data) {
 try {
 localStorage.setItem(key, data);
 } catch (e) {
 console.error('Ошибка сохранения: ', e);
 }
 }
 saveLargeData('largeData', '...');
});

Получение данных с проверкой на null (jQuery)


$(document).ready(function() {
 let data = localStorage.getItem('nonExistentKey');
 if (data !== null) {
 console.log(data);
 } else {
 console.log('Данные отсутствуют');
 }
});

Сохранение данных с метаинформацией (jQuery)


$(document).ready(function() {
 let metaData = { created: Date.now(), author: 'Admin' };
 localStorage.setItem('metaInfo', JSON.stringify(metaData));
});

Получение метаинформации (jQuery)


$(document).ready(function() {
 let metaInfo = JSON.parse(localStorage.getItem('metaInfo'));
 console.log(metaInfo.author); // Admin
});

Сохранение данных с версией (jQuery)


$(document).ready(function() {
 let versionedData = { version: 1, content: 'Some content' };
 localStorage.setItem('versionedData', JSON.stringify(versionedData));
});

Получение данных с проверкой версии (jQuery)


$(document).ready(function() {
 let savedVersionedData = JSON.parse(localStorage.getItem('versionedData'));
 if (savedVersionedData.version === 1) {
 console.log(savedVersionedData.content); // Some content
 }
});

Сохранение данных с таймером (jQuery)


$(document).ready(function() {
 let timedData = { value: 'Timed Data', timestamp: Date.now() };
 localStorage.setItem('timedData', JSON.stringify(timedData));
});

Получение данных с проверкой времени (jQuery)


$(document).ready(function() {
 let savedTimedData = JSON.parse(localStorage.getItem('timedData'));
 if (Date.now() - savedTimedData.timestamp < 60000) { // 1 минута
 console.log(savedTimedData.value); // Timed Data
 }
});

Сохранение данных с инкрементным ключом (jQuery)


$(document).ready(function() {
 let counter = localStorage.getItem('counter') || 0;
 localStorage.setItem('data_' + counter, 'Data ' + counter);
 localStorage.setItem('counter', ++counter);
});

Получение данных с инкрементным ключом (jQuery)


$(document).ready(function() {
 for (let i = 0; i < counter; i++) {
 console.log(localStorage.getItem('data_' + i));
 }
});

Сохранение данных с проверкой на дубликаты (jQuery)


$(document).ready(function() {
 let items = JSON.parse(localStorage.getItem('items')) || [];
 if (!items.includes('New Item')) {
 items.push('New Item');
 localStorage.setItem('items', JSON.stringify(items));
 }
});

Получение данных с фильтрацией (jQuery)


$(document).ready(function() {
 let filteredItems = items.filter(item => item.startsWith('New'));
 console.log(filteredItems);
});

Сохранение данных с сортировкой (jQuery)


$(document).ready(function() {
 let sortedItems = items.sort();
 localStorage.setItem('sortedItems', JSON.stringify(sortedItems));
});

Получение отсортированных данных (jQuery)


$(document).ready(function() {
 let savedSortedItems = JSON.parse(localStorage.getItem('sortedItems'));
 console.log(savedSortedItems);
});

Сохранение данных с группировкой (jQuery)


$(document).ready(function() {
 let groupedData = { group1: ['Item1', 'Item2'], group2: ['Item3'] };
 localStorage.setItem('groupedData', JSON.stringify(groupedData));
});

Получение сгруппированных данных (jQuery)


$(document).ready(function() {
 let savedGroupedData = JSON.parse(localStorage.getItem('groupedData'));
 console.log(savedGroupedData.group1); // ['Item1', 'Item2']
});

Сохранение данных с индексацией (jQuery)


$(document).ready(function() {
 let indexedData = { index1: 'Value1', index2: 'Value2' };
 localStorage.setItem('indexedData', JSON.stringify(indexedData));
});

Получение данных по индексу (jQuery)


$(document).ready(function() {
 let savedIndexedData = JSON.parse(localStorage.getItem('indexedData'));
 console.log(savedIndexedData.index1); // Value1
});

Сохранение данных с преобразованием (jQuery)


$(document).ready(function() {
 let transformedData = { original: 'Data', transformed: btoa('Data') };
 localStorage.setItem('transformedData', JSON.stringify(transformedData));
});

Получение преобразованных данных (jQuery)


$(document).ready(function() {
 let savedTransformedData = JSON.parse(localStorage.getItem('transformedData'));
 console.log(atob(savedTransformedData.transformed)); // Data
});

Сохранение данных с обработкой ошибок (jQuery)


$(document).ready(function() {
 try {
 localStorage.setItem('importantData', 'Critical Information');
 } catch (e) {
 console.error('Ошибка сохранения данных: ', e);
 }
});

Получение данных с обработкой ошибок (jQuery)


$(document).ready(function() {
 try {
 let data = localStorage.getItem('importantData');
 if (data === null) {
 console.log('Данные отсутствуют');
 } else {
 console.log(data);
 }
 } catch (e) {
 console.error('Ошибка получения данных: ', e);
 }
});

Сохранение данных с автоматическим удалением через время (jQuery)


$(document).ready(function() {
 let data = { value: 'Temporary Data', expires: Date.now() + 60000 }; // 1 минута
 localStorage.setItem('tempData', JSON.stringify(data));

 setTimeout(function() {
 localStorage.removeItem('tempData');
 console.log('Данные удалены');
 }, 60000);
});

Попробуйте использовать LocalStorage

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Пример использования localStorage</title>
 <style>
 body {
 font-family: Arial, sans-serif;
 margin: 20px;
 }
 label {
 font-weight: bold;
 }
 input {
 margin-bottom: 10px;
 }
 button {
 padding: 5px 10px;
 cursor: pointer;
 }
 </style>
</head>
<body>

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

<label for="nameInput">Введите ваше имя:</label>
 <input type="text" id="nameInput" placeholder="Ваше имя">
 <button onclick="saveName()">Сохранить</button>

// Функция для отображения приветствия
 function showGreeting(name) {
 document.getElementById('greeting').textContent = `Привет, ${name}!`;
 }

// Проверяем, есть ли сохранённое имя в localStorage
 const savedName = localStorage.getItem('userName');
 if (savedName) {
 showGreeting(savedName);
 document.getElementById('nameInput').value = savedName;
 }
 </script>

</body>
</html>

Заключение

И JavaScript, и jQuery могут эффективно использоваться для работы с localStorage. Выбор между ними зависит от ваших предпочтений и требований проекта. Если вам нужно максимально быстрое и легковесное решение, используйте чистый JavaScript. Если вы уже работаете с jQuery и хотите упростить манипуляции с DOM, то jQuery станет отличным выбором. Используйте наш Интерактивный редактор LocalStorage для тестирования работы LocalStorage в ваших проектах.

Всего комментариев: 0

BootstrapTema