页面刷新后更改输入位置
我尝试使用localStorage保存输入元素的位置。我保存了输入元素的位置，在重新加载页面后，我可以访问它，但在刷新页面后，它始终处于默认位置。（值真/假）
HTML:
<div class="switch">
<input type="checkbox" value="false" id="c1">
<label for="c1"><span></span></label>
</div>
JS：
const chk = document.getElementById('c1');
var storedPosition = localStorage.getItem('saved');
console.log("Saved input value: " + storedPosition);
chk.addEventListener("change", () => {
if(chk.value === "false"){
chk.value = "true";
console.log(chk.value);
}else{
chk.value = "false";
console.log(chk.value);
}
localStorage.setItem('saved',chk.value);
});
明确地说，我正在创建chrome扩展（选项页）。
编辑：
const chk = document.getElementById('c1');
var storedPosition = localStorage.getItem('saved');
console.log("Saved input value: " + storedPosition);
chk.value = storedPosition; //edited set different value
chk.addEventListener("change", () => {
if(chk.value === "false"){
chk.value = "true";
console.log(chk.value);
}else{
chk.value = "false";
console.log(chk.value);
}
localStorage.setItem('saved',chk.value);
});
共有2个答案
对于输入元素，value属性控制元素的初始值，因此在刷新页面时重置元素是有意义的，但是如果js脚本没有将输入值更改为存储值，请确保在html脚本中使用类似的值
<script src="index.js"></script>
如果你已经这么做了，我可能帮不上什么忙，否则我觉得这是正确的
你只需要检查复选框是否被选中。如果选中复选框，请创建localstore，否则删除localstore。
下面是例子：
<!DOCTYPE html>
<html>
<body>
<div class="switch">
<input type="checkbox" id="c1">
<label for="c1"><span id="chkcheck"></span></label>
</div>
<script>
const chk = document.getElementById('c1');
window.onload = function(){
var storedPosition = localStorage.getItem('saved');
if(storedPosition != null)
{
chk.setAttribute("checked", "checked");
}
console.log(storedPosition);
};
chk.addEventListener("change", () => {
if(chk.checked){
chk.setAttribute("checked", "checked");
localStorage.setItem("saved","saved");
}else{
chk.removeAttribute("checked");
localStorage.removeItem('saved');
}
});
</script>
</body>
</html>
-
我有一个具有2个视图\控制器的应用程序： 谢谢你。
-
问题内容： 这有可能吗？ 这是问题所在： 我有一个使用此URL的关键字搜索（搜索后）：http：// localhost / thi / search？keyword = key 然后我有一个使用AjaxForm插件（jquery）的滑块搜索… 当我执行滑块搜索时，显然我仍然会在关键字搜索URL中（因为请求是通过ajax发送的） 有没有办法将当前网址更改为类似http：// localhost /
-
我正在尝试用Angular构建一个简单的计算器，如果我想的话，我可以覆盖总数。我有这部分的工作，但当我回去输入一个数字在一个或两个领域的总数没有在该领域的更新。 这是我的jsfiddlehttp://jsfiddle.net/YUza7/2/ 形式 javascript
-
问题内容： 发生更改时，如何检测对数据库的最新更新并以静默方式刷新页面？ 假设数据库访问如下所示： 任何想法和样品将不胜感激。谢谢。 问题答案： 这就是我最近使用jQuery实现解决方案的方式。 每当发生 重大 更新时，PHP都会在数据库中增加一个字段。 最初加载页面时，使用数据库中的数字填充JavaScript变量：
-
问题内容： 我从数据库获取数据并将其显示在div中…我要做的是单击链接时应更改div的内容 一种选择是通过URL将参数传递给自身并重新加载页面… 我需要这样做而 无需重新加载\刷新 … 目的是当我单击任何链接时，div和php变量的内容无需刷新即可更新....这样 用户可以看到新数据 ，然后如果执行某些查询，它将在新变量上 ps我知道它将需要一些AJAX，但我不知道AJAX ..所以请以我可以学习
-
我正在使用php和javascript进行网络编程，这是我想问的一个一般性问题，通常在页面刷新时，文本区域或输入中的所有内容都会被删除； 是否有办法保留用户输入、键入的字符或复选框？不保存到会话中？还是我真的需要保存它？非常感谢。 （我不是说表单提交导致重新加载，但只是简单地键入文本区域，然后按下刷新按钮。）