-1
Я создал простое приложение задач, которое позволяет вам добавлять различные задачи. Он работает нормально. Я не уверен, что лучший подход, однако, чтобы сохранить данные/HTML после обновления страницы. Я слышал о сеансе HTML5/localStorage, но я не уверен, что это лучший метод для использования в этой ситуации. Кроме того, мне нужна помощь в создании этой работы, если бы sessionStorage был хорошим выбором.Должен ли я использовать sessionStorage, и если да, то как?
window.onload = init;
function init() {
var generateBtn = document.getElementById("generate");
generateBtn.onclick = addTask;
var tasksWrapper = document.getElementById("tasksWrapper");
var taskDesc = document.getElementById("taskDesc");
}
var taskId = 0;
var taskBarArray = [];
function addTask() {
taskId++;
var taskBar = document.createElement("div");
var taskBarInput = document.createElement("input");
var taskBarDeleteBtn = document.createElement("input");
taskBar.setAttribute("id", taskId);
taskBar.setAttribute("class", "taskBar");
taskBarInput.setAttribute("class", "taskDesc");
taskBarInput.setAttribute("type", "text");
taskBarInput.setAttribute("placeholder", "Enter task");
function rmPlaceholder() {
taskBarInput.removeAttribute("placeholder", "Enter task");
}
function addPlaceholder() {
taskBarInput.setAttribute("placeholder", "Enter task");
}
taskBarInput.onfocus = rmPlaceholder;
taskBarInput.onblur = addPlaceholder;
taskBarInput.setAttribute("name", "taskDesc");
taskBarInput.setAttribute("value", taskDesc.value);
taskBarDeleteBtn.setAttribute("class", "deleteBtn");
taskBarDeleteBtn.setAttribute("type", "button");
taskBarDeleteBtn.setAttribute("value", "x");
var addTaskBar = tasksWrapper.appendChild(taskBar);
var targetTaskId = document.getElementById(taskId);
var addTaskBarInput = targetTaskId.appendChild(taskBarInput);
var AddTaskBarDeleteBtn = targetTaskId.appendChild(taskBarDeleteBtn);
taskBarArray.push(taskBar);
taskDesc.value = "";
taskBarDeleteBtn.onclick = removeTask;
function removeTask(e) {
taskBarDeleteBtn = e.target;
tasksWrapper.removeChild(taskBar);
taskBarArray.pop(e);
if (taskBarArray.length < 1) {
taskId = 0;
}
}
}\t \t #main_wrapper {
\t \t margin: 0 auto;
\t \t max-width: 528px;
\t \t width: 100%;
\t \t height: 20px;
\t \t }
\t \t .taskBar {
\t \t width: 100%;
\t \t background: #333230;
\t \t border-bottom: 1px solid #fff;
\t \t border-radius: 10px;
\t \t }
\t \t .taskDesc {
\t \t margin: 10px 0 10px 10px;
\t \t background: none;
\t \t border: none;
\t \t outline: none;
\t \t font-size: 20px;
\t \t color: #fff;
\t \t text-transform: uppercase;
\t \t z-index: 9999;
\t \t }
\t \t .deleteBtn {
\t \t margin: 6px 6px 0 0;
\t \t padding: 6px;
\t \t width: 32px;
\t \t background: #8F0A09;
\t \t font-size: 15px;
\t \t color: #fff;
\t \t border-radius: 100px;
\t \t border-color: #000;
\t \t float: right;
\t \t outline: none;
\t \t }
\t \t #header {
\t \t padding: 10px;
\t \t background: #000;
\t \t border-bottom: 1px solid #fff;
\t \t border-radius: 10px;
\t \t }
\t \t #taskDesc {
\t \t padding: 2px 0;
\t \t width: 50%;
\t \t font-size: 20px;
\t \t }
\t \t #generate {
\t \t padding: 5px 83px;
\t \t background: #82CC12;
\t \t font-size: 20px;
\t \t border-color: #000;
\t \t border-radius: 5px;
\t \t outline: none;
\t \t }
\t \t ::-webkit-input-placeholder {
\t \t color: #4C4B48;
\t \t }
\t \t ::-moz-placeholder {
\t \t color: #4C4B48;
\t \t }
\t \t :-ms-placeholder {
\t \t color: #4C4B48;
\t \t }
\t \t<div id="main_wrapper">
<div id="header">
<input type="text" id="taskDesc"></input>
<input type="button" id="generate" value="Add task">
</div>
<div id="tasksWrapper">
</div>
</div>