Как использовать WebStorage для хранения данных на клиенте

WebStorage представляет собой технологию, позволяющую хранить данные на стороне клиента с использованием пар ключ-значение. Веб-разработчики используют два вида хранилищ: localStorage и sessionStorage. Оба хранилища имеют схожие методы и свойства, но различаются по продолжительности хранения данных.

localStorage

localStorage хранит данные без срока давности, что означает, что они сохраняются на клиенте даже после закрытия браузера. Чтобы сохранить данные в localStorage, используйте следующий код:

localStorage.setItem('ключ', 'значение');

Чтобы получить данные из localStorage, используйте следующий код:

const value = localStorage.getItem('ключ');
console.log(value);

Чтобы удалить данные из localStorage, используйте следующий код:

localStorage.removeItem('ключ');

Чтобы очистить все данные из localStorage, используйте следующий код:

localStorage.clear();

sessionStorage

В отличие от localStorage, sessionStorage хранит данные только на время действия сессии. Данные удаляются после закрытия браузера или вкладки. Чтобы сохранить данные в sessionStorage, используйте следующий код:

sessionStorage.setItem('ключ', 'значение');

Чтобы получить данные из sessionStorage, используйте следующий код:

const value = sessionStorage.getItem('ключ');
console.log(value);

Чтобы удалить данные из sessionStorage, используйте следующий код:

sessionStorage.removeItem('ключ');

Чтобы очистить все данные из sessionStorage, используйте следующий код:

sessionStorage.clear();

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

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

// Сохранение настроек пользователя
const userSettings = {
  theme: 'dark',
  fontSize: '16px',
};

localStorage.setItem('userSettings', JSON.stringify(userSettings));

// Получение настроек пользователя
const savedUserSettings = JSON.parse(localStorage.getItem('userSettings'));

console.log(savedUserSettings); // вывод: {theme: "dark", fontSize: "16px"}

Теперь вы знаете, как использовать WebStorage для хранения данных на клиенте. Не забывайте проверять размер хранилища, так как они имеют ограничение в 5-10 МБ в зависимости от браузера. 😉

Если вы хотите углубить свои знания в веб-разработке, рекомендуем посетить знакомую школу, которая предлагает качественное обучение. Удачи в изучении!