时间戳

首页 > 解决方案 > 我正在玩通过 JavaScript 存储用户输入的数据，需要帮助

javascript - 我正在玩通过 JavaScript 存储用户输入的数据，需要帮助

问题描述

我正在尝试设置一个网站，将用户锻炼了多少小时存储到一个数组中，将该数组保存到用户计算机，然后在下次加载页面时将该数组记录到控制台。这是我到目前为止所拥有的，但它不起作用。有什么建议么？

// Script

init();

function init() {

    if (localStorage.getItem('exerciseData') !== null && localStorage.getItem('exerciseData') !== undefined) {
        exerciseData = localStorage.getItem('exerciseData');
        console.log(exerciseData);
    } else {
        console.log('blank exercise data array');
        exerciseData = [];
    }
}


let x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "How long did you exercise today?");
x.size = "40";
document.body.appendChild(x);
document.write('     ');
let btn = document.createElement("BUTTON");
btn.innerHTML = "Submit";   
document.body.appendChild(btn);

var exerciseData = [];
console.log('test');

btn.onclick = function () {
    var date = new Date();
    let day = date.getDate();
    let month = date.getMonth();
    let year = date.getFullYear();
    exerciseData.push(`${day}/${month + 1}/${year} : ${x.value}`);
    //exerciseData.push(day + '/' + (month + 1) + '/' + year + ':' + x.value);
    localStorage.setItem("exerciseData", exerciseData); 
}

标签： javascriptstorage

解决方案

exerciseData如果在调用之前将定义移到顶部，您的代码看起来会起作用init()。

现在，[]当您在运行后定义它时，它被一个空覆盖init()。

另一个问题是document.createElement()语句应该使用小写的元素名称而不是INPUTor BUTTON。

最后，您不能将数组存储在 中localStorage，但可以存储字符串。因此，存储/获取数据应该使用字符串，而不是数组：

localStorage.setItem("exerciseData", JSON.stringify(exerciseData));

//...
exerciseData = JSON.parse(localStorage.getItem("exerciseData"));

推荐阅读