Javascript 如何使用localStorage缓存按钮结果？

我有一个完全用JS制作的按钮

我想保存它是否处于true或false状态，以便当用户离开页面时，按钮将在返回时处于相同的状态。我想使用localStorage，但我对JS比较陌生，所以它们可能是更好的解决方案

当前代码：

var btn;
var btn = document.createElement("BUTTON");
btn.onclick =  function() {myFunction()};
btn.style.height = "100%";
btn.style.width = "98%";
btn.style.border = "0px";
btn.innerHTML = "CLICK ME";  
btn.id = "toggle";


document.getElementById("button").appendChild(btn);

function myFunction() {
    document.getElementById('notepad').classList.toggle('hide'); return false
}

编辑代码：

window.onload = function initBt(){
var buttonState = localStorage.getItem('mybutton');
if ( null !== buttonState )
{
buttonState && document.getElementById('notepad').classList.add('hide');
}
}
var btn;


var btn = document.createElement("BUTTON");
btn.onclick =  function() {myFunction()};
btn.style.height = "100%";
btn.style.width = "98%";
btn.style.border = "0px";
btn.innerHTML = "CLICK ME";  


btn.id = "toggle";


document.getElementById("button").appendChild(btn);


function myFunction() {
var bt = document.getElementById('notepad');
bt.classList.toggle('hide');
localStorage.setItem('mybutton', bt.classList.contains('hide'))
return false;
}

---

您可以在youir代码中使用以下函数来存储和检索按钮状态：

用法示例：

store('mybutton', buttonState);
var buttonState = retrieve('mybutton');
if ( buttonState !== null )
{
   /* set button State*/
}
else
{
   /* state has not been saved before, initialise */
}

注意由于

localStorage

只能处理字符串值，我们在保存时使用

JSON.stringify

从数据中生成字符串，在检索时使用

JSON.parse

，以便存储和检索任意数据（当然是这样）

对于更新的问题，请尝试以下内容（如果添加了整个html结构，则会更有帮助，因为缺少一些元素，但无论如何）：

对于一个灵活的web/browser缓存库，它可以支持多种存储机制（也支持服务器端php和node.js）检查（ps.I是作者）

---

当然还有其他库（例如）

请先试用localStorage。然后，如果你有问题，回来展示你的想法tried@charlietfl我会的，但我只看到它用于文本值而不是结果，所以我不确定如何使它工作。但我会继续努力。因此，您为按钮的不同状态存储不同的值，然后检查页面加载中的内容，并做出相应的反应。我如何表示按钮的状态？这取决于您的应用程序，可能一个简单的

true

或

false

值就足够了（即按钮设置或未设置）。然后只需存储此值，并在检索时根据更新按钮。如果答案解决了您的问题，请接受它。这样回答的人会有所帮助，但仍然需要为他们的努力而得到认可。我无法使您的代码正常工作，我将它弄乱了一段时间，但从未使其正常工作。感谢帮助：）您使用的检索和存储也是库的一部分吗？@STOAM，存储/检索函数不是库的一部分，但您可以在我的回答中检查使用类似方法的链接库，或者如果您不希望整个库的开销，只需使用这些有用的函数。你到底在哪里被卡住了，也许我能帮你？我怀疑您没有在代码的适当位置放置存储和检索调用，以便正确存储和检索按钮状态。。

store('mybutton', buttonState);
var buttonState = retrieve('mybutton');
if ( buttonState !== null )
{
   /* set button State*/
}
else
{
   /* state has not been saved before, initialise */
}

// include the needed localStorage manipulation methods
function store(key, data)
{
    localStorage.setItem(key, JSON.stringify(data));
}
function retrieve(key)
{
   var data = localStorage.getItem(key);
   return data ? JSON.parse(data) : null;
}
function remove(key)
{
   localStorage.removeItem(key);
}

// create and initialise the button
var btn = document.createElement("BUTTON");
btn.onclick =  function() {myFunction()};
btn.style.height = "100%";
btn.style.width = "98%";
btn.style.border = "0px";
btn.innerHTML = "CLICK ME";  
btn.id = "toggle";
document.getElementById("button").appendChild(btn);
var buttonState = retrieve('mybutton');

// make sure at this point element with id="notepad" exists on page
if ( null !== buttonState )
{
    buttonState && document.getElementById('notepad').classList.add('hide');
}

function myFunction() {
var bt = document.getElementById('notepad');
bt.classList.toggle('hide');
store('mybutton', bt.classList.contains('hide'));
return false;
}