Question

当我按下按钮时，我正在尝试使用javascript在类之间切换。同时在页面刷新时保持状态相同。下面的脚本运行正常，因为我看到按钮在单击时改变了状态。但是，当刷新页面时，一切都消失了。我确实读过这个论坛关于在jquery中使用cookie，但我想我会使用本地存储，因为为什么不呢。
我做错了什么？

<button name='idButton'  class='glyphicon glyphicon-eye-open' id=confirmButton onclick='addBasket(this)'>Click Me</button>

<script>
     function addBasket($element) {
    var className = $element.getAttribute("class");
    if (className == "glyphicon glyphicon-eye-open") {
        $element.className = "glyphicon glyphicon-eye-close";
    }
    else {
        $element.className = "glyphicon glyphicon-eye-open";
    }

    localStorage.setItem("item",  $element); //Store the element so it can be accessed later.
     localStorage.setItem("class", $element.className); //Store the last class name
}
localStorage.getItem("item").className = localStorage.getItem("class").name;
//The last line should run when page loads because it is outside the scope of the method  
</script>

Answer 1

您无法在localStorage中存储元素。它只存储字符串。

尝试以下方法：

//Storing
localStorage.setItem("class", className);

//Page Load (after element exists)
var btnClass = localStorage.getItem("class")
if (btnClass) {
  document.getElementById('confirmButton ').className = btnClass;
}

对于更高级的对象，从存储中检索时可以存储JSON.stringify和JSON.parse

Answer 2

我知道这已经很晚了，但我使用动态创建的按钮为持久按钮状态做了一个示例。您可以查看评论，看看发生了什么！ Persistent Button State using LocalStorage

//These are shortcut helper methods
let select = document.querySelector.bind(document);
let selectAll = document.querySelectorAll.bind(document);


function init() {
  //First, create grid of buttons (for testing)
  let sethtml = '';
  for (var y = 0; y < 5; y++) {
    for (var x = 0; x < 5; x++) {
      sethtml += "<button class='glyphicon changestate glyphicon-eye-open' id='eyebtn" + x + "" + y + "' onclick='changeState(this)'></button>";
    }
    sethtml += '<br>';
  }
  document.body.innerHTML = sethtml;

  //Next, get all of the elements whose state can be changed and are persistent
  let changeEls = selectAll('.changestate');
  //for each one in this list
  for (var i = 0; i < changeEls.length; i++) {
    let el = changeEls[i];
    let id = el.id;
    //see if there is a reference to them already in the storage
    //and if there is not add that reference
    if (localStorage) {
      if (!localStorage.getItem(id)) {
        //Save the states of the buttons to localStorage
        localStorage.setItem(id, JSON.stringify([id, JSON.stringify(el.classList)]));
      }
      else {
        //Set the states based on stored data
        let data = JSON.parse(localStorage.getItem(id));
        let elid = data[0];
        let classList = JSON.parse(data[1]);
        //Eliminate previous classes
        document.getElementById(elid).className = "";
        //Add in classes gathered from storage
        for (let myclass in classList) {
          select('#' + elid).classList.add(classList[myclass]);
        }
      }
    }
  }
}

//Change state of each button
function changeState(el) {
  let id = el.id;
  //if open, set to close
  if (el.classList.contains('glyphicon-eye-open')) {
    el.classList.remove('glyphicon-eye-open');
    el.classList.add('glyphicon-eye-close');
  }
  //if close, set to open
  else {
    el.classList.remove('glyphicon-eye-close');
    el.classList.add('glyphicon-eye-open');
  }
  if (localStorage) {
    //set the localStorage to reflect this
    localStorage.setItem(id, JSON.stringify([id, JSON.stringify(el.classList)]));
  }
}

init();

使用localstorage在按钮类之间切换

2 个答案: