-1

さまざまなタスクを追加できるシンプルなタスク アプリを作成しました。それは正常に動作します。ただし、ページが更新されたらデータ/HTMLを保持するための最良の方法はわかりません。HTML5 session/localStorage について聞いたことがありますが、これがこの状況で使用する最善の方法かどうかはわかりません。また、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;
    }
  }
}
		#main_wrapper {
		  margin: 0 auto;
		  max-width: 528px;
		  width: 100%;
		  height: 20px;
		}
		.taskBar {
		  width: 100%;
		  background: #333230;
		  border-bottom: 1px solid #fff;
		  border-radius: 10px;
		}
		.taskDesc {
		  margin: 10px 0 10px 10px;
		  background: none;
		  border: none;
		  outline: none;
		  font-size: 20px;
		  color: #fff;
		  text-transform: uppercase;
		  z-index: 9999;
		}
		.deleteBtn {
		  margin: 6px 6px 0 0;
		  padding: 6px;
		  width: 32px;
		  background: #8F0A09;
		  font-size: 15px;
		  color: #fff;
		  border-radius: 100px;
		  border-color: #000;
		  float: right;
		  outline: none;
		}
		#header {
		  padding: 10px;
		  background: #000;
		  border-bottom: 1px solid #fff;
		  border-radius: 10px;
		}
		#taskDesc {
		  padding: 2px 0;
		  width: 50%;
		  font-size: 20px;
		}
		#generate {
		  padding: 5px 83px;
		  background: #82CC12;
		  font-size: 20px;
		  border-color: #000;
		  border-radius: 5px;
		  outline: none;
		}
		::-webkit-input-placeholder {
		  color: #4C4B48;
		}
		::-moz-placeholder {
		  color: #4C4B48;
		}
		:-ms-placeholder {
		  color: #4C4B48;
		}
		
<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>

4

1 に答える 1

0

ここでは localStorage を使用します。これは、セッションがタイムアウトした後でも記憶されます。ユーザーがブラウザを再起動すると、セッションはおそらく終了します。

localStorage で見られる唯一の問題は、デスクトップでの 10 MB のサイズ制限 (モバイル デバイスでは 2 MB だと思います) であり、localStorage からサーバーにデータを取得するのは簡単ではありません。しかし、localStorage は単純なアイテムを使用する TODO アプリに最適です。

于 2015-03-16T15:16:15.883 に答える