所以，我用javascript和相对基本的css和html文件创建了一个基本的todo list应用程序。我目前正在localstorage中存储每个todo列表项，但是我想将本地存储数据推送到mysql数据库中。我已经创建了一个简单的模式和数据库连接js文件，但是在找出将localstorage数据推入mysql的最佳方法时遇到了问题。我尝试使用post&get方法并使用api路由，但我觉得这太复杂了。
在localstorage中存储数据的代码：
//Currently storing todo list data in local storage
var data = (localStorage.getItem('todoList')) ? JSON.parse(localStorage.getItem('todoList')):{
todo: [],
completed: []
};
function dataObjectUpdated() {
localStorage.setItem('todoList', JSON.stringify(data));
}当前数据库连接：
var mysql = require("mysql");
var connection = mysql.createConnection({
host: "localhost",
port: 3306,
// Your username
user: "root",
// Your password
password: "",
database: "todo_list"
});
connection.connect(function(err) {
if (err) throw err;
console.log("connected as id " + connection.threadId);
connection.end();
});基本模式：
-- Drops the todo_list if it exists currently --
DROP DATABASE IF EXISTS todo_list;
-- Creates the "todo_list" database --
CREATE DATABASE todo_list;
-- Makes it so all of the following code will affect todo_list --
USE todo_list;
-- Creates the table "favorite_foods" within todo_list --
CREATE TABLE tasks (
-- Makes a string column called "Task" which cannot contain null --
Task VARCHAR(50) NOT NULL
);main.js文件供参考：
//Currently storing todo list data in local storage
var data = (localStorage.getItem('todoList')) ? JSON.parse(localStorage.getItem('todoList')):{
todo: [],
completed: []
};
//Remove and completed svg code icons
var removeSVG = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><g><g><path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6L16.3,18.7L16.3,18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"/></g><g><g><path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/></g><g><path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8C7.4,10.2,7.7,10,8,10c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"/></g><g><path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z"/></g></g></g></svg>'
var completeSVG = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><rect y="0" class="noFill" width="22" height="22"/><g><path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/></g></svg>'
renderTodoList();
//User clicking add button, if text is present in the task field, add task to the todo list
document.getElementById('add').addEventListener('click', function(){
var value = document.getElementById('task').value;
if (value) {
addItemToDOM(value);
document.getElementById('task').value = '';
data.todo.push(value);
dataObjectUpdated();
}
});
function addItem (value) {
addItemToDOM(value);
document.getElementById('item').value = '';
data.todo.push(value);
dataObjectUpdated();
}
function renderTodoList() {
if (!data.todo.length && !data.completed.length) return;
for (var i = 0; i < data.todo.length; i++) {
var value = data.todo[i];
addItemToDOM(value);
}
for (var j = 0; j < data.completed.length; j++) {
var value = data.completed[j];
addItemToDOM(value, true);
}
}
function dataObjectUpdated() {
localStorage.setItem('todoList', JSON.stringify(data));
}
//Remove item from the todo list function
function removeItem(){
var item = this.parentNode.parentNode;
var parent = item.parentNode;
var id = parent.id;
var value = item.innerText;
if (id === 'todo') {
data.todo.splice(data.todo.indexOf(value), 1);
} else {
data.completed.splice(data.completed.indexOf(value), 1);
}
dataObjectUpdated();
parent.removeChild(item);
}
//Function for completed todo list items
function completeItem() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;
var id = parent.id;
var value = item.innerText;
if (id === 'todo') {
data.todo.splice(data.todo.indexOf(value), 1);
data.completed.push(value);
} else {
data.completed.splice(data.completed.indexOf(value), 1);
data.todo.push(value);
}
dataObjectUpdated();
//
var target = (id === 'todo') ? document.getElementById('completed'):document.getElementById('todo');
parent.removeChild(item);
target.insertBefore(item, target.childNodes[0]);
}
//Adding a new todo task to the list
function addItemToDOM(task, completed){
var list = (completed) ? document.getElementById('completed'):document.getElementById('todo');
var item = document.createElement('li');
item.innerText = task;
var buttons = document.createElement('div');
buttons.classList.add('buttons');
var remove = document.createElement('button');
remove.classList.add('remove');
remove.innerHTML = removeSVG;
//Add click event for removing task
remove.addEventListener('click', removeItem);
var complete = document.createElement('button');
complete.classList.add('complete');
complete.innerHTML = completeSVG;
//Add Click event for completing tasks
complete.addEventListener('click', completeItem);
buttons.appendChild(remove);
buttons.appendChild(complete);
item.appendChild(buttons);
list.insertBefore(item, list.childNodes[0]);
}我已经为express、node、mysql和sequelize安装了npm。说实话，我真的只需要将todo项存储在sql数据库中并使它们持久化。我之所以选择localstorage到sql的路径，是因为我还没有弄清楚如何将todo列表项直接存储在sql数据库中。请让我知道我在哪里可以澄清我的问题，如果需要的话。谢谢。
暂无答案！
目前还没有任何答案，快来回答吧！