LocalStorage.setItem: примеры (JAVASCRIPT)

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

Сохранение простых строковых значений:

localStorage.setItem('username', 'Алексей');
localStorage.setItem('theme', 'dark');

// Значения сохранены в localStorage

Сохранение числовых значений (преобразуются в строки):

localStorage.setItem('count', 42);
const retrieved = localStorage.getItem('count');
console.log(typeof retrieved, retrieved);

// string "42"

Сохранение объектов с использованием JSON:

const user = { name: 'Мария', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// Объект сохранен как строка "{"name":"Мария","age":30}"

Альтернативные методы Web Storage API

sessionStorage.setItem() - работает аналогично, но данные сохраняются только на время сессии (до закрытия вкладки браузера).

localStorage.getItem(key) - получение значения по ключу.

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

localStorage.clear() - полная очистка хранилища для текущего домена.

localStorage.key(index) - получение имени ключа по индексу.

Прямое обращение через свойство: localStorage.myKey = 'value' - альтернативный синтаксис, который также сохраняет данные. Однако метод setItem() предпочтительнее, так как явно указывает на операцию сохранения и позволяет лучше обрабатывать ошибки.

Типичные ошибки и их решение

Попытка сохранить объект без сериализации:

const obj = { id: 1 };
localStorage.setItem('item', obj);
console.log(localStorage.getItem('item'));

// "[object Object]" - объект преобразован в строку некорректно

Превышение квоты хранилища (обычно 5-10 МБ на домен):

try {
    const hugeData = 'x'.repeat(10 * 1024 * 1024);
    localStorage.setItem('huge', hugeData);
} catch (e) {
    console.error('Ошибка:', e.message);
}

// Ошибка: QuotaExceededError

Использование зарезервированных символов в ключах:

localStorage.setItem('ключ-с-пробелом', 'значение');
// Работает, но может усложнить отладку

// Значение успешно сохранено

Работа в режиме инкогнито или при отключенном localStorage:

if (typeof localStorage === 'undefined') {
    console.log('localStorage не поддерживается');
    // Использовать альтернативное хранилище
}

// Проверка выполнена

История изменений и поддержка

Метод localStorage.setItem() был представлен в HTML5 и с тех пор не претерпел значительных синтаксических изменений. Основные изменения касаются политик безопасности браузеров:

• Браузеры теперь блокируют доступ к localStorage при отключенных cookies в приватном режиме.
• Введены ограничения на доступ к localStorage из iframe с другого домена.
• Современные браузеры реализуют Storage Access API для управления доступом к хранилищу в кросс-доменных iframe.

Совместимость: метод поддерживается всеми современными браузерами, включая мобильные, начиная с IE8, Chrome 4, Firefox 3.5, Safari 4, Opera 10.5.

Расширенные примеры использования

Создание обертки для автоматической сериализации/десериализации:

const storage = {
    set: (key, value) => {
        localStorage.setItem(key, JSON.stringify(value));
    },
    get: (key) => {
        const item = localStorage.getItem(key);
        return item ? JSON.parse(item) : null;
    }
};

storage.set('settings', { theme: 'dark', notifications: true });
console.log(storage.get('settings'));

// { theme: "dark", notifications: true }

Реализация кэширования данных с временем жизни:

function setWithExpiry(key, value, ttl) {
    const now = new Date();
    const item = {
        value: value,
        expiry: now.getTime() + ttl
    };
    localStorage.setItem(key, JSON.stringify(item));
}

function getWithExpiry(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;
    
    const item = JSON.parse(itemStr);
    const now = new Date();
    
    if (now.getTime() > item.expiry) {
        localStorage.removeItem(key);
        return null;
    }
    return item.value;
}

setWithExpiry('token', 'abc123', 3600000); // 1 час
console.log(getWithExpiry('token'));

// "abc123" (если не прошло больше часа)

Пакетное сохранение данных:

const batchData = {
    user: { name: 'Иван' },
    preferences: { lang: 'ru' },
    history: ['page1', 'page2']
};

Object.entries(batchData).forEach(([key, value]) => {
    localStorage.setItem(key, JSON.stringify(value));
});

// Проверка сохранения
console.log(JSON.parse(localStorage.getItem('user')).name);

// "Иван"

Использование для сохранения состояния формы:

const form = document.getElementById('myForm');

// Автосохранение при изменении
form.addEventListener('input', (e) => {
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    localStorage.setItem('formDraft', JSON.stringify(data));
});

// Восстановление при загрузке
window.addEventListener('load', () => {
    const saved = localStorage.getItem('formDraft');
    if (saved) {
        const data = JSON.parse(saved);
        Object.keys(data).forEach(key => {
            if (form.elements[key]) {
                form.elements[key].value = data[key];
            }
        });
    }
});

// Значения формы восстанавливаются после перезагрузки страницы

Работа с массивами в localStorage:

// Добавление элемента в массив
function addToStorageArray(key, newItem) {
    const current = JSON.parse(localStorage.getItem(key) || '[]');
    current.push(newItem);
    localStorage.setItem(key, JSON.stringify(current));
    return current;
}

addToStorageArray('tasks', { id: 1, title: 'Купить молоко' });
addToStorageArray('tasks', { id: 2, title: 'Заправить машину' });

console.log(JSON.parse(localStorage.getItem('tasks')));

// [{ id: 1, title: "Купить молоко" }, { id: 2, title: "Заправить машину" }]

Аналоги в других языках программирования

PHP (сессии): данные хранятся на сервере.

session_start();
$_SESSION['username'] = 'Алексей';

// Данные доступны до закрытия сессии

Python (словари): для постоянного хранения требуется сериализация.

import json
with open('data.json', 'w') as f:
    json.dump({'username': 'Алексей'}, f)

// Данные сохранены в файл

MySQL: данные хранятся в базе данных на сервере.

INSERT INTO users (key, value) VALUES ('theme', 'dark');

// Данные сохранены в таблице базы данных

C (файловый ввод-вывод): требуется работа с файловой системой.

FILE *fp = fopen("data.txt", "w");
fprintf(fp, "%s", "username=Alex");
fclose(fp);

// Данные записаны в текстовый файл

В отличие от localStorage, перечисленные методы обычно предполагают хранение данных на сервере или в файловой системе, а не в браузере пользователя.