Question

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

我想保存它是真还是假，以便如果用户离开页面，则返回时按钮将处于相同状态。我想使用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;
}

Answer 1

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

localStorage documentation

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);
}

用法示例：

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

注意，因为localStorage可以处理仅字符串值，所以在保存时我们使用JSON.stringify来使数据中的字符串和{{1 }}进行检索以便存储和检索任意数据（当然是JSON valid structures）

对于更新后的问题，请尝试以下操作（如果由于缺少某些元素而添加了整个html结构，则会有所帮助）：

JSON.parse

要获取适用于网络/浏览器的灵活缓存库，该库可以支持多种存储机制（并且还支持服务器端php和node.js），请选中Unicache（我是作者）。

当然还有其他库（例如localForage）

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

1 个答案: