Я играю с хранением введенных пользователем данных через JavaScript, нужна помощь - PullRequest
Новая
       5

Я играю с хранением введенных пользователем данных через JavaScript, нужна помощь

0 голосов
/ 03 февраля 2020

Я пытаюсь настроить веб-сайт, который хранит информацию о том, сколько часов пользователь использовал в массиве, сохраняет массив на компьютер пользователя, а затем записывает массив на консоль при следующей загрузке страницы. Вот что у меня пока что, но не работает. Есть предложения? 

// 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); 
}

Ответы [ 2 ]

0 голосов
/ 03 февраля 2020

Я надеюсь, что это может помочь. 

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);


function time() {
    const date = new Date();
    let day = date.getDate();
    let month = date.getMonth() + 1;
    let year = date.getFullYear();
    return [day, month, year];
}

function isLocalStorageSet() {
    return localStorage.getItem('exerciseData') ? true : false;
}

function getLocalStorage() {
    return localStorage.getItem('exerciseData');
}

function setLocalStorage() {
    if (validate()) {
        [day, month, year] = time();
        last = x.value;
        localStorage.setItem('exerciseData', `${day}/${month}/${year} : ${x.value} Hour`);
        msg(getLocalStorage())
        return;
    } 
    msg('the value has to be Number');
}

function validate() {
    return !isNaN(x.value);
}

function msg($error) {
    console.log($error);
}

if (isLocalStorageSet()) {
    msg(getLocalStorage());
}

btn.onclick = setLocalStorage;
0 голосов
/ 03 февраля 2020

Ваш код выглядит так, как будто он будет работать, если вы переместите определение exerciseData наверх, прежде чем вызывать init().

. Сейчас он перезаписывается с пустым [], поскольку вы определение его после выполнения init().

Другая проблема заключается в том, что document.createElement() операторы должны использовать строчные имена элементов вместо INPUT или BUTTON.

Наконец, вы не можете хранить массив в localStorage, но вы можете хранить строки. Таким образом, для хранения / получения данных следует использовать строки, а не массивы: 

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

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