Question

我一直在努力从头开始整理待办事项列表。到目前为止，我已经使用HTML，CSS，Javascript和JQuery来完成这项工作。我现在已经掌握了所有基本功能。现在出现了实际存储和检索要显示的实际数据的困难部分。

我知道php / mysql可以为此工作，但我正在尝试为我的第一个大项目保持这个基础而不是压倒自己。所以我虽然AJAX可以工作，但似乎AJAX只能读取文件而不是正确的。所以现在我想知道用什么好的基本语言或技术来获取和存储数据。也许AJAX和XML文件？但我还需要另一种语言吗？或者可以全部由客户端使用？

https://jsfiddle.net/pnewelljr/jqdkfLdx/38/

$(document).ready(function() {
    
    $(document).on("click",".items",function() {
        $(this).remove();
    });
    
    $(document).on("click","li", function () {
        $("li").removeAttr("class");
        $(this).attr("class","selectedlist");
        $(".items, #itemsbar > p").remove();
        $("#itemsbar").append('<div class=\"items\" id=\"c1div\"><input type=\"checkbox\" id=\"c1\" name=\"c1\" /> \
        <label for=\"c1\"><span></span>New Box~</label></div><p>Click to Add</p>');
    });
    
    $(document).on("click","#itemsbar > p",function () {
        $(this).remove();
        $("#itemsbar").append('<input class="addnew" type=\"text\"></input>');
    });
    
    $(document).on("keyup",'.addnew', function (e) {
        if (e.which == 13) {
            var value = $(".addnew").val();
            $("#itemsbar").append('<div class=\"items\" id=\"c1div\"><input type=\"checkbox\" id=\"c1\" name=\"c1\" /> \
            <label for=\"c1\"><span></span>' + value + '</label></div>');
            $(this).remove();
            e.preventDefault();
            $("#itemsbar").append('<p>Click to Add</p>');
        }
    });
    
    $(document).on("click","#addlist",function() {
        $("#listsbar").append('<input class="addnewlist" type=\"text\"></input>');
    });

    $(document).on("keyup",'.addnewlist', function (e) {
        if (e.which == 13) {
            var value = $(".addnewlist").val();
            $("#lists").append('<li id="l3">' + value + '</li>');
            $(this).remove();
            e.preventDefault();
        }
    });
    
});

h1 {
    font-size: 150%;
    color: white;
}

#title {
    float: left;
}

#main {
    height: 100vh;
    width: 100vw;
}

/* Lists Bar */

#listsbar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    height: 100%;
    float: left;
    background-color: #6678AC;
}

#listsbar h1, li {
    padding: 10px;
}

#listsbar ul {
    list-style-type: none;
    padding: 0;
}

#lists li {
    color: white;
}

.selectedlist {
    width: 100%;
    background-color: #0D1839;
    display: block;
}

/* Items Bar */

#itemsbar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 70%;
    height: 100%;
    padding: 20px;
    float: right;
    background-color: #C7D5FF;
}

#itemsbar ul {
    list-style-type: none;
    padding: 0;
}

<div id="main">
    <div id="listsbar">
        <h1 id="title">To Do List</h1>
        <h1 id="addlist">+</h1>
        <ul id="lists">
            <li id="l1" class="selectedlist">Test List</li>
            <li id="l2">Test List 2</li>
        </ul>
    </div>
    <div id="itemsbar">
        <div class="items" id="c1div"><input type="checkbox" id="c1" name="c1" />
        <label for="c1"><span></span>Check Box 1</label></div>
        <div class="items" id="c2div"><input type="checkbox" id="c2" name="c2" />
        <label for="c2"><span></span>Check Box 2</label></div>
        <p>Click to Add</p>
    </div>
</div>

Answer 1

对于存储数据，您需要一个数据库或其他可以存储数据的地方。您只能通过client-side工作来实现这一目标。您可以使用很多内容：php + mysql，.net +sql server等等。

Ajax不是用于存储数据的工具，它只是调用API（或服务器端方法）的“选项”。

Ajax不是一种编程语言或工具，而是一种概念。 Ajax是一个与服务器/数据库进行通信的客户端脚本无需回发或完整页面刷新。最好的我读过Ajax的定义是“用数据交换数据的方法” 服务器，并更新网页的部分 - 无需重新加载整页。“

你说你刚开始，所以我建议你开始学习一项技术，因为将来你需要它。你可以从PHP开始（从我听说它比.NET更容易）

您可以使用的另一个工具（如果您想编写javascript）是nodejs，它可以扮演服务器的角色，并且用javascript

编写

当然，有可能在客户端存储数据，但我不建议你，主要是因为你刚开始，你也应该学习一些服务器端技术。我在谈论将数据存储到localStorage

localStorage是一种在客户端计算机上存储数据的方法。

示例：

localStorage.token= "12345";
// or
localStorage.setItem('token','12345');

Answer 2

本地存储。

var data = document.getElementById('listsbar').innerHTML;
localStorage.setItem('ToDos',data);

并检索它：

document.getElementById('listsbar').innerHTML = localStorage.getItem('ToDos');

这是在jsfiddle上使用localstorage的一个例子。

http://jsfiddle.net/Tobsta/xodfj5y5/

如果你将它保存为html文件，它会起作用，但是由于安全问题，jsfiddle不会运行它。这是一个教程：

http://www.w3schools.com/html/html5_webstorage.asp

Answer 3

如果要将数据保存在服务器上，则必须使用数据库（如mysql）。如果只能在客户端存储数据，则可以使用localstorage来执行此操作。 Php可以是您的服务器端语言，以从数据库中获取数据。 Ajax将帮助您获取内容而无需重新加载整个页面。我建议你按照一个简单的教程。 This tutorial可以帮助您完成待办事项列表。它使用html，javascript，css，php，ajax，mysql。

存储数据的基本待办事项列表

3 个答案: