页面重新加载后保留按钮属性答案

【问题标题】：Keep button properties after page reload页面重新加载后保留按钮属性
【发布时间】：2017-01-23 12:07:27
【问题描述】：

您好，我正在尝试在 html 中设置按钮属性，当它被点击时，当它没有被点击时，当页面没有重新加载时，这些更改工作正常。我想在页面重新加载后保留按钮属性，o 如果单击按钮然后重新加载页面，则按钮需要保持选中状态。

我用 html 制作了这个例子来展示我所拥有的

<button id="btntext" class="k-button" onclick="clickEvent(this.id, 't2')" onmousemove="imgChange(this.id, 't2', 't')"  onmouseout="imgChange(this.id, 't','t2')"><img id= "icon" class="k-image" alt="text" src="../images/t2.png" style="width: 30px; height: 30px; vertical-align:inherit" hspace="7"/>Text</button>

还有一个脚本可以在单击或鼠标移动时更改 img (imgChange)，但它不能按我的需要工作。

【问题讨论】：

标签： javascript html css typescript

【解决方案1】：

看有两种解决方案； 1.客户端解决方案 2.服务器端解决方案

1.客户端解决方案

一个。使用 localStorage 或 sessionStorage，例如，

考虑你的html；

 <button id="somebutton" style="color:red" onclick=click()>Some Button</button>

现在是 JS：

 function click(){
      $("#somebutton").css("color","green");
      localStorage.setItem("btncolor","green");
 }

在文件加载时

 window.onload=function()
 {
      $("#somebutton").css("color",localStorage.getItem("btncolor"));
 }

2.服务器端解决方案

在单击按钮时调用 ajax 以在服务器端保存按钮状态，在 window.onload 上调用另一个 ajax 以从服务器端获取状态。

【讨论】：

第一次加载页面时可以将Item设置为localStorage吗？
是的，你可以。在 windows.onload 函数中写 localStorage.setItem("key","val")
我在 HTML 文档中的 Script 函数中使用了 localStorage，但是 window.onload 在那里不起作用，它只适用于 JS 吗？
发布您的代码或制作小提琴并在此处发布链接。

【解决方案2】：

使用 localstorage 变量并将其设置为 true 或 false。 http://www.w3schools.com/html/html5_webstorage.asp

你可以在javascript中设置变量并绑定到html。

【讨论】：