Hướng dẫn how do i keep my data after refreshing page in html? - làm cách nào để giữ dữ liệu của tôi sau khi làm mới trang trong html?

Vì vậy, tôi đã xây dựng một ứng dụng theo dõi ngân sách hàng tháng của mình - chi phí, thu nhập, tỷ lệ phần trăm, v.v. Để ở đó, với tổng ngân sách sau khi tôi tải lại trang, vì ngay bây giờ chúng có các giá trị trong mã HTML mà tôi đã thay đổi thành số không. Tôi đã được thông báo rằng có một cái gì đó liên quan đến JSON ở đây, nhưng tôi không biết làm việc với nó. Nếu ai đó có thể giúp tôi thì nó sẽ thực sự được đánh giá cao. Tôi không thể dán toàn bộ mã vì nó là 450 dòng JavaScript.

Tôi đã thử các phương pháp khác nhau nhưng không ai trong số họ làm việc.

// GLOBAL APP CONTROLER
var controller = (function(budgetCtrl, UICtrl) {

    var setupEventListeners = function() {
        var DOM = UICtrl.getDOMstrings();

        document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);

        document.addEventListener('keypress', function(event) {
            if (event.keyCode === 13 || event.which === 13) {

                ctrlAddItem();

            }
        });

        document.querySelector(DOM.container).addEventListener('click', ctrDeleteItem);

        document.querySelector(DOM.inputType).addEventListener('change', UICtrl.changedType);
    };

    var updateBudget = function() {

        // 1. Calculate the budget
        budgetCtrl.calculateBudget();

        // 2. Return Budget
        var budget = budgetCtrl.getBudget(); // the getBudget method only returns the budget,inc,exp and %

        // 3. Display the budget on the UI
        UICtrl.displayBudget(budget);
    };

    var updatePercentages = function() {
        // 1. Calculate the percentages
        budgetCtrl.calculatePercentages();

        // 2. Read percentages from budget controller
        var percentages = budgetCtrl.getPercentages();

        // 3. Display the percentages on the UI
        UICtrl.displayPercentages(percentages);
    };

    var ctrlAddItem = function () {
        var input, newItem;

        // 1. Get the field input data
        input = UIController.getInput();

        // we check if there is an input description or value so the code runs
        if (input.description !== '' && !isNaN(input.value) && input.value > 0) {
            // 2. Add the item to the budget controler
            newItem = budgetCtrl.addItem(input.type, input.description, input.value);

            // 3. Add the new item to the UI
            UICtrl.addListItem(newItem, input.type);

            // 4. Clear the fields
            UICtrl.clearFields();

            // 5. Calculate and update Budget
            updateBudget();

            // 6. Calculate and update percentages
            updatePercentages();
        }
    };

    var ctrDeleteItem = function(event) {
        var itemID, splitID, type, ID;

        itemID = event.target.parentNode.parentNode.parentNode.parentNode.id; // parentNode gets the parent of the target of the event

        if (itemID) {

            // inc-1
            splitID = itemID.split('-'); // split returns an array with the other items except the '-'
            type = splitID[0];
            ID = parseInt(splitID[1]);

            // 1. Delete the item from the data structure
            budgetCtrl.deleteItem(type, ID);

            // 2. Delete the item from the UI
            UICtrl.deleteListItem(itemID);

            // 3. Update and show the new budget
            updateBudget();

            // 4. Calculate and update percentages
            updatePercentages();
        }

    };

    return {
        init: function() {
            console.log('Application has started.');
            UICtrl.displayMonth();
            // 3. Display the budget on the UI
            UICtrl.displayBudget({
                budget: 0,
                totalInc: 0,
                totalExp: 0,
                percentage: -1
            });
            setupEventListeners();
        }
    }


})(budgetController, UIController);;

Tôi hiện đang lưu trữ dữ liệu trong bộ điều khiển dữ liệu

// BUDGET CONTROLLER
var budgetController = (function() {

    // we create a constructor 
    var Expense = function(id, description, value) {
        this.id = id;
        this.description = description;
        this.value = value;
        this.percentage = -1;
    };

    // this method in the prototype of expense calculates %
    Expense.prototype.calcPercentage = function(totalIncome) {

        if (totalIncome > 0) {
            this.percentage = Math.round((this.value / totalIncome) * 100); 
        } else {
            this.percentage = -1
        }
    };

    // this method in the prototype of expense returns the %
    Expense.prototype.getPercentage = function() {
        return this.percentage;
    };

    var Income = function(id, description, value) {
        this.id = id;
        this.description = description;
        this.value = value;
    };

    var calculateTotal = function(type) {
        var sum = 0;
        data.allItems[type].forEach(function(cur) {
            sum += cur.value;
        });
        data.totals[type] = sum;
    };

    // we store the incomes' description in all items array and the price in the totals
    var data = {
        allItems: {
            exp: [],
            inc: []
        },
        totals: {
            exp: 0,
            inc: 0
        },
        budget: 0,
        percentage: -1
    };

Làm thế nào để bạn lưu trữ dữ liệu sau khi làm mới trang?

Làm cách nào để tự động làm mới html?

Điều gì xảy ra khi chúng ta làm mới một trang web?

Làm thế nào để bạn làm mới cùng một trang trong HTML?