Javascript 计算器&x27；即使在刷新时也会在本地存储中保存历史记录

我正在做一个计算器，它存储以前计算的历史记录，并将其列在表格中。该列表需要存储在web浏览器的本地存储器中

由于数据存储在本地存储器上，所以即使在页面刷新时也不应丢失上下文

我在下面附上我的Javascript代码：

let currentTotal = 0; 
let buffer = "0"; //what's on display

let previousOperator = null;

const calcScreen = document.querySelector(".calc-numbers");

document.querySelector('.calculator-buttons').addEventListener("click",function(event){

    //call function buttonClick
    buttonClick(event.target.innerHTML);
});

//separates de value of the button clicks into NotANumber and Numbers
function buttonClick(value){
    if(isNaN(parseInt(value))){
        handleSymbol(value);
    }else{
        handleNumber(value);
    }
    rerenderScreen();
}

function handleSymbol(value){
    switch (value){
        case "C":
            buffer = "0";
            currentTotal = 0;
            previousOperator = null;
            break;
        case "=":
            if(previousOperator === null){ //this would mean that there is nothing to be calculated yet
                return;
            }
            flushOperation(parseInt(buffer));
            buffer = "" + currentTotal;
            previousOperator = null;
            currentTotal = 0;
            break;
        case "←":
            if(buffer.length === 1){ //if the screen is any single number, always turn it to 0 when deleting
                buffer = "0";
            }
            else{
                buffer = buffer.substring(0,buffer.length-1); //delete the numbers one by one
            }
            break;
        default:
            handleMath(value);
            break;
    }
}

function handleNumber(value){
    if(buffer === "0"){
        buffer = value;
    }else{
        buffer += value;
    }
}

function handleMath(value){
    const internalBuffer = parseInt(buffer);
    
    if (currentTotal === 0){
        currentTotal = internalBuffer;
    }else{
        flushOperation(internalBuffer);
    }

    previousOperator = value;

    buffer = "0";
}

function flushOperation(internalBuffer){
    if(previousOperator === "+"){
        currentTotal += internalBuffer;
    }else if(previousOperator === "-"){
        currentTotal -= internalBuffer;
    }else if(previousOperator === "x"){
        currentTotal *= internalBuffer;
    }else{
        currentTotal /= internalBuffer;
    }
}

function rerenderScreen(){
    calcScreen.value = buffer;
}

我引用了这个链接

我在以前的Javascript代码下添加了以下代码：

let itemsArray = []
localStorage.setItem('items', JSON.stringify(itemsArray))
const data = JSON.parse(localStorage.getItem('items'))
 
itemsArray.push(input.value)
localStorage.setItem('items', JSON.stringify(itemsArray)) 

我刷新了我的页面。但是数据不是本地存储的。我尝试在控制台中键入localstorage，但它是空的

添加控制台选项卡中获得的结果的屏幕截图

我同时也犯了这个错误

未捕获引用错误：未定义输入

---

我们在这里帮助你解决你自己无法解决的问题，即使在尝试之后。只是说：“不幸的是它不起作用”，并不意味着你付出了太多的努力。你试过什么？您是否使用浏览器中的开发人员工具来查看正在发生的事情？这是一个存储或检索问题吗？如果你能像@KIKOSoftware所说的那样缩小这个问题的范围，这将非常有帮助。查看浏览器devtools中的控制台，查看是否有任何错误。与其尝试一次完成所有工作，不如尝试在localstorage上存储一点数据，看看是否有效。一旦你做对了，就添加计算器代码。当你说它是空的时候，你是说localStorage是空的还是数组“items”是空的？我在我的问题中附加了一个图像。所以代码被复制了，但我在代码中看不到

input

。。。那么，应该向数组中添加什么来代替

input

，

event.target.innerHTML

，或者？您可能需要使用所有最新更新更新问题代码，以便更好地了解问题的整体情况。我们在这里帮助您解决您自己无法解决的问题，即使在尝试之后。只是说：“不幸的是它不起作用”，并不意味着你付出了太多的努力。你试过什么？您是否使用浏览器中的开发人员工具来查看正在发生的事情？这是一个存储或检索问题吗？如果你能像@KIKOSoftware所说的那样缩小这个问题的范围，这将非常有帮助。查看浏览器devtools中的控制台，查看是否有任何错误。与其尝试一次完成所有工作，不如尝试在localstorage上存储一点数据，看看是否有效。一旦你做对了，就添加计算器代码。当你说它是空的时候，你是说localStorage是空的还是数组“items”是空的？我在我的问题中附加了一个图像。所以代码被复制了，但我在代码中看不到

input

。。。那么，应该向数组中添加什么来代替

input

，

event.target.innerHTML

，或者？您可能需要使用所有最新的更新更新问题的代码，以便更好地了解问题的内容。