如何在 localStorage 中存储计数器并在单击按钮时将其显示在 UI 上

Question

我想创建一个计数器变量，并将其存储在本地存储中，并在单击保存按钮时将计数器值显示到 UI。即使页面是新鲜的，此计数器也应保留在 UI 上。

const plusBtn = document.querySelector('.plus-btn');
const minusBtn = document.querySelector('.minus-btn');
const saveBtn = document.querySelector('.save-btn')
const span = document.querySelector('.span');


// EVENTLISTENERS
plusBtn.addEventListener('click', plus);
minusBtn.addEventListener('click', minus);
saveBtn.addEventListener('click', getCount );

// apdates UIert


//FUNCTIONS

var counter = localStorage.getItem('counter') || 0;

function plus() {
    counter ++ ;
    span.innerText = counter;
    //localStorage.setItem('counter', counter);
    //span.innerText = localStorage.getItem('counter');
     
};


function minus() {
    counter -- ;
    span.innerText = counter;
    //localStorage.setItem('counter', counter);
    
};

 function getCount() { 
    //localStorage.getItem('counter
     span.innerText = counter;
    localStorage.setItem('counter', counter);
  


}

Answer 1

加载时您没有进行分配

  var counter = localStorage.getItem('counter') || 0;

  span.innerText = counter