BootstrapTema

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

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

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

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

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

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

Примеры на 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);
});

• Предыдущий
•  Следующий