Автосохранение текста с задержкой и локальным хранилищем!

Научим JS сохранять данные из поля ввода через некоторое время после последнего изменения — и восстанавливать их при загрузке страницы.

Создаём функцию debounce (задержка вызова):

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

Инициализируем поле ввода и восстанавливаем данные из localStorage:

const textarea = document.createElement('textarea');
document.body.appendChild(textarea);

textarea.value = localStorage.getItem('autosave') || '';

Сохраняем данные с задержкой 1 секунда после ввода:

textarea.addEventListener('input', debounce(() => {
  localStorage.setItem('autosave', textarea.value);
  console.log('Данные сохранены!');
}, 1000));

🔥 Очень полезно для UX — не терять тексты при случайном закрытии вкладки, и не грузить хранилище или сервер слишком часто.

📣 JS Ready | #практика

📱 JavaScript для начинающих, с практикой!

Курс раскрывает основы JavaScript: переменные, строгий режим, типы данных и базовую математику — всё, чтобы уверенно стартовать в программировании на JS. Автор объясняет темы максимально понятным языком, а уроки построены последовательно и доступно.

Ссылочка на плейлист: YouTube 🖤

📣 JS Ready | #курс

Немедленное выполнение функции (IIFE)

В JavaScript можно выполнить функцию сразу после её объявления — с помощью IIFE. Это удобно для изоляции переменных и безопасного запуска скриптов.

Простой пример вызова:

(function () {
  console.log("Функция выполнена немедленно");
})();

Добавим аргумент:

(function (name) {
  console.log(`Привет, ${name}`);
})("Анна");

Изоляция переменных:

let role = "user";

(function () {
  let role = "admin";
  console.log("Внутри:", role);
})();

console.log("Снаружи:", role);

Результат:

Функция выполнена немедленно  
Привет, Анна  
Внутри: admin  
Снаружи: user

🔥 С IIFE можно запускать код немедленно и не создавать глобальных переменных.

📣 JS Ready | #практика

👩‍💻 Знаете, что можно визуализировать историю Git прямо внутри VS Code?

Git Graph — мощный плагин, который показывает древовидную структуру коммитов в виде наглядной граф-схемы: ветки, слияния, история — всё как на ладони.

Особенно удобен, если работаете в нескольких ветках или сопровождаете чужой проект — сразу видно, что где происходило.

📣 JS Ready | #vscode