即使在刷新时，计算器在本地存储中的历史记录

问题描述

我正在做一个存储以前计算历史记录并在表中列出的计算器。该列表需要存储在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;
}

我引用了此链接how to add a localstorage for my Calculator?

我在以前的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，但它为空。

添加在控制台标签中获得的结果的屏幕截图

我也同时收到此错误

未捕获的ReferenceError：输入未定义

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）