Локальное хранилище объясняется простым языком 🔥

«Локальное хранилище» звучит как сложная тема, но в этой статье мы расскажем, что это значит и почему вам должно быть интересно узнать больше. Локальное хранилище существует уже некоторое время, но многие разработчики не знают точно, что это такое и как его эффективно использовать.💾

Что такое локальное хранилище в JavaScript?

Если вы используете веб-браузер, то каждый раз, когда вы закрываете вкладку или возвращаетесь на домашнюю страницу приложения, он сохраняет часть того, что было запущено. Подумайте, как часто это происходит, и в любой момент, возможно, кто-то закрывает свои вкладки в другой стране!🔥

Это означает, что любой может видеть все, что он делал на этих сайтах, не имея для них пароля. Эти данные хранятся в сети навсегда, и никто не отслеживает их — до сих пор!!! Только что появившаяся новая услуга под названием «локальное хранилище» решила эту проблему, позволив людям хранить вещи только локально (на своем устройстве), где никто, кроме них самих, не сможет найти их снова после того, как позаботится о бизнесе здесь!!

Примеры локального хранилища?

let userObject = {
    name: 'Ron Fybish',
    age: 26,
    married: false
};

4 основных метода JavaScript, которые можно использовать с локальным хранилищем:

1. setItem(): добавить ключ и значение в локальное хранилище.
2. getItem(): получить значение по ключу из локального хранилища.
3. removeItem(): удалить элемент по ключу из локального хранилища.
4. clear(): очистить все локальное хранилище.

⚠️ Вещи, которые вы должны знать. ⚠️

Локальное хранилище может сохранять только строки, поэтому для хранения объектов требуется, чтобы они были преобразованы в строки с помощью JSON.stringify(). Это также означает, что объект должен быть запущен через JSON.parse() на выходе из локального хранилища.

📅 .setItem() — Добавляет ключ и значение в локальное хранилище.

localStorage.setltem('userObject', JSON.stringtfy(userObject));

📅 .getItem() — Получить значение по ключу из локального хранилища.

let userJsonStrtng = localStorage.getItem('userObject');

📅 Разберите строку JSON обратно в объект JavaScript.

let retrieveUserObject = JSON.parse(userJsonStrtng);
console.log(retrieveUserObject);
// Output: 👉 {name:'Ron Fybish', age: 26, married: false}

📅 Локальное хранилище — доступ к отдельным значениям.

retrieveUserObject.name; 
// Output: 👉 'Ron Fybish'
retrieveUserObject.age; 
// Output: 👉 26
retrieveUserObject.married; 
// Otput: 👉 false

Локальное хранилище — ключевые моменты ✔️❌

1. Не храните конфиденциальную информацию о пользователях в локальном хранилище.
2. Локальное хранилище ограничено 5 МБ во всех основных браузерах.
3. Локальное хранилище является частью API веб-хранилища, которое позволяет хранить данные в браузере пользователя, к которым может получить доступ ваше приложение.
4. Локальное хранилище позволяет сайтам и приложениям #javascript хранить данные локально в браузере без ограничения срока действия.
5. Это означает, что данные, хранящиеся в браузере, останутся там даже после того, как вы закроете окно браузера.
6. Другими словами, вы можете хранить в локальном хранилище любые данные, которые просты и понятны.

📌 Заключение 📌

Теперь вы знаете, как использовать Локальное хранилище в своих проектах веб-разработки и понимаете этот тип ограничения хранилища. Надеюсь, вы многому научились из моего поста, но если нет, не стесняйтесь обращаться ко мне за дополнительной информацией о том, что нужно для работы с локальным хранилищем данных. Если вас интересуют другие темы, связанные с веб-разработкой или маркетинговой стратегией, сообщите мне об этом.