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

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从数据中生成字符串，在按顺序检索时使用JSON.parse存储和检索任意数据（当然是JSON valid structures）

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

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

对于可以支持多种存储机制（也支持服务器端php和node.js）的灵活的web/浏览器缓存库，请查看Unicache（ps.我是作者）

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