我嘗試使用 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);
});
uj5u.com熱心網友回復：
您只需要檢查復選框是否被選中。如果復選框被選中，localstorage否則洗掉本地存盤。
下面是例子：
<!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>
uj5u.com熱心網友回復：
對于輸入元素， value 屬性控制元素的初始值，因此它會在頁面重繪 時重置，但如果 js 腳本沒有將輸入值更改為存盤值，請確保您正在使用它在你的 html 腳本中，類似于
<script src="index.js"></script>
如果你已經這樣做了，我可能幫不上什么忙，否則對我來說它看起來是正確的
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/375503.html
標籤：javascript html