Я завершил приложение To do без локального хранилища, поэтому теперь нужно узнать, как работает локальное хранилище, и провести рефакторинг приложения, чтобы оно могло работать с локальным хранилищем.
Локальное хранилище — это веб-хранилище, в котором хранятся данные без срока годности.
Есть 4 метода, о которых я узнал, чтобы сделать с локальным хранилищем. setItem(), getItem(), removeItem() и clear()
SetItem() — добавляет ключ и значение в локальное хранилище.
Когда вы впервые заходите в приложение To do без локального хранилища, открываете инструменты разработчика и вводите localStorage; в консоль, ничего не появляется, так как ничего не сохраняется в локальном хранилище. Вы можете добавить вещи в локальное хранилище, выполнив следующие действия:
localStorage.setItem('todos', 'Make Breakfast');
Затем, когда вы наберете localStorage;, он будет отображаться следующим образом.
localStorage;
Storage{todos: "Make Breakfast", length:1};
Вы можете добавить несколько вещей в локальное хранилище следующим образом:
localStorage.setItem('doNotDo', 'Sleep in');
localStorage;
Storage{doNotDo: "Sleep in", toDos: "Make Breakfast", length: 2}
GetItem() — получить значение по ключу, а не по всему массиву, как показано выше. Он нацелен на определенные значения в локальном хранилище. Вы можете сделать это с помощью следующего кода:
localStorage.getItem('todos');//will return "Make Breakfast"
RemoveItem() — удалить элемент по ключу
localStorage.removeItem('doNotdo');
Теперь, когда вы вводите localStorage, он будет показывать только задачи, а не doNotdos.
Clear() — очистить все хранилище. Это очищает все локальное хранилище, а не только один ключ, такой как removeItem(). Вы можете сделать это следующим образом:
localStorage.clear();
Теперь, когда мы введем localStorage, он будет пуст.
Теперь пришло время вернуться к приложению To Do и реорганизовать его с помощью локального хранилища.
Сначала мне нужно было объявить переменную todosArray для хранения наших задач. Я установлю это как пустой массив. Это важно, потому что в локальном хранилище мы хотим, чтобы наш ключ todos представлял растущий список значений todos, а не только одно значение todo.
Следующей задачей было использование метода setItem(), как упоминалось ранее, для установки todos в строку с помощью JSON.stringify().
JSON.stringify() используется, потому что localStorage работает со строками. JSON.stringify() преобразует объекты Javascript в строковый формат с использованием JSON. Это позволяет мне отправлять объекты Javascript из веб-браузера в локальное хранилище.
Я сделал это с помощью следующего кода:
localStorage.setItem('todos', JSON.stringify(todosArray));
Следующим шагом была возможность доступа к ключу todos и его значению в приложении. Это позволит пользователю закрыть браузер или обновить браузер, но при этом иметь доступ ко всем задачам.
Я объявил переменную «storage», которая содержит всю информацию в localStorage. Мне пришлось использовать метод JSON.parse(), который преобразует строку из локального хранилища в данные, к которым я могу получить доступ с помощью JavaScript. При получении данных с веб-сервера данные всегда представляют собой строку. Поэтому мне нужно проанализировать данные с помощью JSON.parse(), и данные станут объектом JavaScript.
Я сделал это с помощью следующего кода:
var storage= JSON.parse(localStorage.getItem('todos'));
Далее нужно было разобраться с формой. Всякий раз, когда пользователь отправляет задачу, я хотел отобразить ее на странице с помощью функции todoMaker, как я делал в v1, но теперь я также хочу добавить этот пользовательский ввод в мой todosArray, а затем обновить наши элементы задач с помощью этого массива в локальном хранилище.
Сначала мне пришлось вставить input.value в todosArray.
todosArray.push(input.value);
Затем мне пришлось обновить todosArray в localStorage. Я использовал метод setItem() с ключом todos и значением todosArray в виде строки с методом JSON.stringify().
localStorage.setItem('todos', JSON.stringify(todosArray));
Теперь я проверил, чтобы убедиться, что он сохраняет его в локальном хранилище на веб-странице, и…….успех!!!
Однако при обновлении страницы изменения все равно теряются. Так что это то, что дальше, чтобы научиться делать.
Я узнал, что, просматривая код до сих пор, каждый раз, когда страница обновляется, мы запускаем JavaScript и устанавливаем todosArray в пустой массив в соответствии с кодом:
var todosArray = [];
И затем локальное хранилище устанавливается на этот пустой массив.
Поэтому мне нужно внести изменения в код. Сначала я закомментировал пустой массив todos. А затем создал новый массив.
Этот новый массив todos будет включать оператора токаря. Это рассмотрит код, который мы предоставляем, и создаст условие — если в локальном хранилище задач есть ключ, то это правда, если нет — ложь. Если это правда, то есть ?, и то, что показано после ?, — это то, что я хочу, чтобы произошло, если то, что я делаю, верно. В таком случае. Я установил для todosArray значение JSON.parse(localStorage.getItem('todos');, это означает, что при обновлении страницы todosArray будет немедленно установлен на todos в локальном хранилище. Если условие ложно, то после двоеточия: следует то, что мы хотим, чтобы код делал, если оно ложно. В данном случае это пустой массив [];
Это было немного, чтобы прийти в себя, но я думаю, что в основном я понял. Весь код выглядит так.
var todosArray = localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')) : [];
Теперь, чтобы проверить, если это сработало…. Ура!
Список пуст, но задачи по-прежнему сохраняются в локальном хранилище. Причина, по которой задачи не отображаются, заключается в том, что нет кода для создания каких-либо задач из того, что находится в локальном хранилище. В настоящее время форма вызывает функцию todoMaker, когда пользователь вводит данные. Итак, теперь мне нужно добавить код, который будет запускать todoMaker поверх localStorage.
Итак, теперь я зациклился на localStorage, когда пользователь впервые открывает pgae, и запускаю функцию todoMaker для каждой задачи в массиве. Чтобы сделать это, я использовал цикл For, чтобы перебрать переменную хранилища и запустить todoMaker для каждого элемента в массиве. Я инициализировал цикл For с 0, так как хотел начать с начала массива. Затем цикл For проверяет, меньше ли i длины массива (storage.length), а затем добавит единицу к i и снова проверит условие. В блоке кода я вызвал функцию todoMaker для массива хранения в расположении [i]. TodoMaker создаст элемент списка и будет использовать свойство текстового содержимого, чтобы установить текст в соответствии с хранилищем в элементе местоположения i. Это добавит к переменной списка задач, которая нацелена на неупорядоченный список для отображения задачи. Код выглядит следующим образом:
for (var i = 0; i < storage.length; i++) {
todoMaker(storage[i]);
}
Отлично… элементы списка остаются при обновлении страницы.
Одна последняя проблема заключается в том, что все работает только до тех пор, пока я не обновлю страницу, а затем они вернутся, поскольку они хранятся в локальном хранилище. Чтобы исправить это, мне нужно было очистить localStorage с помощью метода clear() под кнопкой.addEventListener
localStorage.clear();
Теперь, когда я нажимаю «Очистить» и «Обновить», все исчезает. Ву ху.
И теперь я создал базовое приложение для работы с локальным хранилищем. Код выглядел так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TodoTracker</title>
</head>
<body>
<h1 id="title">Todo Tracker</h1>
<form>
<input type="text" id="user-todo" placeholder="New Todo" required>
</form>
<h2 id="todo-header">Todos</h2>
<ul>
</ul>
<button id="clear">Clear All</button>
<script>
var form = document.querySelector('form');
var todoList = document.querySelector('ul');
var button = document.querySelector('button');
var input = document.getElementById('user-todo');
// var todosArray = [];
var todosArray = localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')) : [];
localStorage.setItem('todos', JSON.stringify(todosArray));
var storage = JSON.parse(localStorage.getItem('todos'));
form.addEventListener('submit', function (e) {
e.preventDefault();
todosArray.push(input.value);
localStorage.setItem('todos', JSON.stringify(todosArray));
todoMaker(input.value);
input.value = "";
});
var todoMaker = function (text) {
var todo = document.createElement('li');
todo.textContent = text;
todoList.appendChild(todo);
}
for (var i = 0; i < storage.length; i++) {
todoMaker(storage[i]);
}
button.addEventListener('click', function () {
localStorage.clear();
while (todoList.firstChild) {
todoList.removeChild(todoList.firstChild);
}
});
</script>
</body>
</html>
Поэтому мне определенно нужно было руководство инструктора, чтобы создать это, но я чувствовал, что у меня было довольно хорошее понимание того, как он проходил через это, и я в восторге от конечного результата.
Далее следует краткий урок по CSS, а затем изучение хостинга.
