javascript - 如何使用 localStorage 缓存按钮结果?
问题描述
我有一个完全用 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;
}
解决方案
您可以在您的代码中使用以下函数来存储和检索按钮状态:
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 有效结构)
对于您更新的问题,请尝试以下操作(如果添加了整个 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)
推荐阅读
- php - PHPUnit 测试不通过依赖测试
- html - HTML 中带有堆叠单选按钮的内联文本
- python - 无法从 python 中的另一个目录导入 python 类
- python - 如何在 python 中获取数据框内的相关性?
- laravel - Laravel:雄辩的 wherehas 不排除具有特定价值的记录
- php - 资源路由
- spring - Spring 错误创建名为“org.speingframework.aop.config.internalAutoProxyCreator”的bean
- visual-studio-code - “术语 'chrome' 未被识别为 cmdlet 的名称”
- javascript - 为什么 Node.js 中 FS 模块的相对路径和要求指向不同的位置?
- github - 如何通过 Github 发布第二个项目