-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 om 移动设备），并且从 localStorage 获取数据到服务器并不容易。但是 localStorage 非常适合带有简单项目的 TODO 应用程序。

于 2015-03-16T15:16:15.883 回答