Как производить запись в файл через JS / Php?

Question

Пишу сайт чисто для себя, чтобы смотреть свои оценки.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="index.js" defer></script>
    <title>Оценки</title>
</head>
<body>
    <div id="container">
        <div id="marks">
            <ul id="lessons"></ul>
        </div>
    </div>
</body>
</html>

window.onload = function() {
    writeListOfLessons();
}


let lessons = [
    "Украинский язык",
    "Украинская литература",
    "Французский язык",
    "Английский язык",
    "Русский язык",
    "Литература",
    "История украины",
    "Всемирная История",
    "Право",
    "Алгебра",
    "Геометрия",
    "Биология",
    "География",
    "Физика",
    "Химия",
    "Труд",
    "Информатика",
    "Основы здоровья",
    "Физ-ра"
];
let marks = [
    [],  //Украинский язык
    [],  //Украинская литература
    [],  //Французский язык
    [],  //Английский язык
    [],  //Русский язык
    [],  //Литература
    [],  //История украины
    [],  //Всемирная История
    [],  //Право
    [],  //Алгебра
    [],  //Геометрия
    [],  //Биология
    [],  //География
    [10],    //Физика
    [],  //Химия
    [],  //Труд
    [],  //Информатика
    [],  //Основы здоровья
    []   //Физ-ра
];
let works = [
    [],  //Украинский язык
    [],  //Украинская литература
    [],  //Французский язык
    [],  //Английский язык
    [],  //Русский язык
    [],  //Литература
    [],  //История украины
    [],  //Всемирная История
    [],  //Право
    [],  //Алгебра
    [],  //Геометрия
    [],  //Биология
    [],  //География
    ["Конспект на тему \"Задачи на строение ядра и вычисление ядерной энергии\""],   //Физика
    [],  //Химия
    [],  //Труд
    [],  //Информатика
    [],  //Основы здоровья
    [] // Физ-ра
];
function writeListOfLessons() {
    for(let id in lessons) {
        let nLi = document.createElement("li");

        nLi.id = id + "li";
        nLi.className = "lessAndMarks";


        let nP = document.createElement("p");

        nP.id = id + "p";
        nP.className = "marks";
        nP.innerHTML = lessons[id] + ": " + (marks[id] == "" ? "<span style=\"font-weight: normal\">Нет оценок</span>" : "");

        document.getElementById("lessons").appendChild(nLi);
        document.getElementById(nLi.id).appendChild(nP);    

        for(let i in marks[id]) {
            let nMark = document.createElement("span");

            nMark.id = id + " " + i + "mark";
            nMark.className = "mark";
            nMark.onclick = function() {
                showWork(id, i);
            };
            nMark.innerHTML = marks[id][i];
            
            let nSign = document.createElement("span");
            nSign.id = id + " " + i + "mark";
            nSign.className = "sign";
            nSign.innerHTML = (Number(i) + 1 == marks[id].length ? "." : ", ");

            document.getElementById(nP.id).appendChild(nMark);
            document.getElementById(nP.id).appendChild(nSign);
        }
        if(marks[id].length > 1) {
            let nInfo = document.createElement("span");
            nInfo.id = id + "averMark";
            nInfo.className = "averMark";
            nInfo.innerHTML = averageMark(id);

            document.getElementById(nP.id).appendChild(nInfo);
        }
        let nButton = document.createElement("button");
        nButton.id = id + "b";
        nButton.className = "new-mark-btn";
        nButton.innerHTML = "+";
        nButton.onclick = function() { fieldForNewMark(id) }; 

        document.getElementById(nLi.id).appendChild(nButton);
    }
}

function writeMarks(lesson) {
    let rText = "";
    for(let i in marks[lesson]) {
        rText += marks[lesson][i] + (i + 1 == marks[lesson].length ? ", " : ".");
        console.log(i);
        console.log(marks[lesson].length);
    }
    return rText;
}
function averageMark(lesson) {
    let sumMarks = 0;
    for(let i in marks[lesson]) {
        sumMarks += marks[lesson][i];
    }

    return (sumMarks == 0 ? "" : ("  Средний бал - " + Math.round(sumMarks / marks[lesson].length)));
}
function showWork(id, i) {
    alert("Оценка: " + marks[id][i] + "\nЗа что: " + works[id][i]);
}
function fieldForNewMark(lesson) {
    document.getElementById(lesson + "b").remove();

    let nPM = document.createElement("p");
    nPM.className = "new-mark";
    nPM.innerHTML = "Оценка: ";

    let nInpM = document.createElement("input");
    nInpM.id = lesson + "inpM";

    let nPR = document.createElement("p");
    nPR.className = "new-mark";
    nPR.innerHTML = "За что: ";

    let nInpR = document.createElement("input");
    nInpR.id = lesson + "inpR";

    let nBtn = document.createElement("button");
    nBtn.id = lesson + "btn";
    nBtn.className = "newMarkBtn";
    nBtn.onclick = function() { newMark(lesson, document.getElementById(nInpM.id).value, document.getElementById(nInpR.id).value)};
    nBtn.innerHTML = "Добавить оценку";

    document.getElementById(lesson + "li").appendChild(nPM);
    document.getElementById(lesson + "li").appendChild(nInpM);
    document.getElementById(lesson + "li").appendChild(nPR);
    document.getElementById(lesson + "li").appendChild(nInpR);
    document.getElementById(lesson + "li").appendChild(nBtn);
}
function newMark(lesson, mark, reason) {
    for(let i in marks) {
        document.getElementById(i + "li").remove();
    }
    if(mark != 0) {
        marks[lesson].push(Number(mark));
    }
    works[lesson].push((reason == "" ? "Ответы на уроке" : reason));
    writeListOfLessons();
}

И вот я пришёл к тому, что практически всё сделано, но вот незадача - оценки-то не сохраняются. Как это сделать? Чтобы я добавил новую оценку, перезагрузил страницу, а она не исчезла, как сейчас, а осталась?

Answer 1

Может будет лучше переднелать данные что типа такого. легче будет

let lessons = {
    "Украинский язык" : { marks : [], works: [] },
};
localStorage.setItem('lessons', JSON.stringify(lessons ))

var lessons = localStorage.getItem('lessons')

БЛОГ НА HUSL

Как производить запись в файл через JS / Php?

Ответы (1 шт):