如何解决即使在刷新时,计算器在本地存储中的历史记录
我正在做一个存储以前计算历史记录并在表中列出的计算器。该列表需要存储在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 举报,一经查实,本站将立刻删除。