我想开发一个TODO列表,该列表可供我的小型编码团队使用。因此,必须将文件保存在服务器上,而不要保存在localStorage上。但是我该怎么办呢? 在文件获得新的列表项之后,每个登录到服务器的人都应该能够看到此内容。
我是javascript的初学者。但是我读到Ajax ist语言用于某些代码。 我不知道如何解决这个问题。
HTML
<center>TODO: Website</center>
<form id="form-website">
<div class="input-group">
<input id="input-todo-website" class="form-todo" placeholder="Füge hier eine Aufgabe hinzu">
<span>
<button id="btn-add" type="button" class="btn">Hinzufügen</button>
</span>
</div>
</form>
<div>
<ul id="list-todo-website" class="list">
</ul>
</div>
<div>
<button id="btn-clear-website" type="button" class="btn">Löschen</button>
</div>
JavaScript
window.onload = function() {
//variables
listNewsletter();
listSonstiges();
var form = document.getElementById("form-website");
var input = document.getElementById("input-todo-website");
var btn = document.getElementById("btn-add");
var list = document.getElementById("list-todo-website");
var btnClr = document.getElementById("btn-clear-website");
var btnClrSonstiges = document.getElementById("btn-add-sonstiges");
var id = 1;
// listItem = {item: "todo item", checked: flase}
var liItemWebsite = "";
var todoListWebsite = [];
//button event listener
btn.addEventListener("click", addTodoItemWebsite);
//list event listener
list.addEventListener("click", boxCheckedWebsite);
//event listener for clear list
btnClr.addEventListener("click", clearListWebsite);
if(localStorage.length <= 0) {
btnClr.style.display = "none";
}
//checking localstorage has data
if(localStorage.length > 0) {
displayListWebsite();
}
//add todo item to list
function addTodoItemWebsite() {
if(input.value === "") {
alert("Du musst eine Aufgabe hinzufügen!");
}
else {
if(list.style.borderTop === "") {
list.style.borderTop = "2px solid white";
btnClr.style.display = "inline";
}
var text = input.value;
var item = `<li id="li-${id}">${text}<input id="box-${id}" class="checkboxes" type="checkbox"></li>`;
list.insertAdjacentHTML('beforeend', item);
liItemWebsite = {item: text, checked: false};
todoListWebsite.push(liItemWebsite);
id++;
addToLocalStorage()
form.reset();
}
}
//adding string through style to list itme
function boxCheckedWebsite(event) {
const element = event.target;
if(element.type === "checkbox") {
element.parentNode.style.textDecoration = "line-through";
todoListWebsite = JSON.parse(localStorage.getItem("todoListWebsite"));
todoListWebsite[element.id.split('-')[1]-1].checked = element.checked.toString();
localStorage.setItem("todoListWebsite", JSON.stringify(todoListWebsite));
}
}
//adding data to local storage
function addToLocalStorage() {
if(typeof(Storage) !== "undefined") {
localStorage.setItem("todoListWebsite", JSON.stringify(todoListWebsite));
}
else {
alert("Dein Browser unterstützt keinen 'LocalStorage'! Somit können deine Daten nicht gespeichert werden");
}
}
function displayListWebsite() {
list.style.borderTop = "2px solid white";
todoListWebsite = JSON.parse(localStorage.getItem("todoListWebsite"));
todoListWebsite.forEach(function(todoListWebsite) {
console.log(todoListWebsite.item)
var text = todoListWebsite.item;
var item = `<li id="li-${id}">${text}<input id="box-${id}" class="checkboxes" type="checkbox"></li>`;
list.insertAdjacentHTML("beforeend", item);
if(todoListWebsite.checked) {
var li = document.getElementById("li-"+id);
li.style.textDecoration = "line-through";
li.childNodes[1].checked = todoListWebsite.checked;
}
id++;
});
}