Javascript 复选框和本地存储_Javascript

Javascript 复选框和本地存储

javascript

Javascript 复选框和本地存储,javascript,Javascript,如果您愿意，我有一个任务列表，我正在尝试创建复选框，当我返回页面时，这些复选框会一直保留在每个任务旁边，但关闭浏览器或硬刷新会终止我的选择。我已经找到了保存单个复选框的代码，但是如何迭代不同的复选框并在下次输入时保留它们呢？这似乎是一个非常简单的过程，但我对javascript非常陌生。。。我可以在vbscript中轻松地做到这一点，但我希望它可以在任何地方工作，而不仅仅是IE 这一切都是新的，所以请温柔一点 <input type="checkbox" id="whatever-1" /

如果您愿意，我有一个任务列表，我正在尝试创建复选框，当我返回页面时，这些复选框会一直保留在每个任务旁边，但关闭浏览器或硬刷新会终止我的选择。我已经找到了保存单个复选框的代码，但是如何迭代不同的复选框并在下次输入时保留它们呢？这似乎是一个非常简单的过程，但我对javascript非常陌生。。。我可以在vbscript中轻松地做到这一点，但我希望它可以在任何地方工作，而不仅仅是IE

这一切都是新的，所以请温柔一点

<input type="checkbox" id="whatever-1" />This task
<input type="checkbox" id="whatever-2" />This task
<input type="checkbox" id="whatever-3" />This task
<input type="checkbox" id="whatever-4" />This task
<input type="checkbox" id="whatever-5" />This task
<input type="button" value="Save" onclick="save();" />

此任务
这项任务
这项任务
这项任务
这项任务

//然后输入我在这里找到的代码的变体
函数save（）{
//输入迭代序列
var checkbox=document.getElementById（“框”）；
setItem（“box”，checkbox.checked）；
}
//用于加载。。。
var checked=JSON.parse（localStorage.getItem（“box”）；
document.getElementById（“框”）.checked=checked<
/脚本>

只需将不同的id传递到

document.getElementById

。请确保为

localStorage.setItem

使用不同的键，以免覆盖不同的值

var checkbox = document.getElementById("whatever-1");
localStorage.setItem("whatever-1", checkbox.checked);

您可以为每个项目单独执行此操作，也可以获取特定类的所有元素。然后循环遍历元素并使用它们的id作为本地存储密钥

或者，您可以使用

for

循环，并在每次

保存时循环您希望保存的任意多个项目
，您可以使用复选框标识和值创建一个对象，将t保存在本地存储中
，在重新加载时，通过一个键获取整个对象，解析它，循环并设置值
function save() {
  //enter iteration sequence
  var checkboxes = document.querySelectorAll("input[type=checkbox]");
  var obj = {};
  for (i = 0; i < checkboxes.length; i++) {
    obj[checkboxes[i].id] = checkboxes[i].checked
  }
  localStorage.setItem("box", JSON.stringify(obj));
}

//for loading...
var checkboxesValues = JSON.parse(localStorage.getItem("box"));
Object.keys(checkboxesValues).map(key => document.getElementById(key).checked = checkboxesValues[key]);

函数保存（）{
//输入迭代序列
var checkbox=document.querySelectorAll（“输入[type=checkbox]”）；
var obj={}；
对于（i=0；idocument.getElementById（key）.checked=checkboxesValues[key]）；
如果您传递正确的输入id，那么您的代码也可以正常工作，但存在一个问题，即对于每个输入，您都必须添加一个变量，您也可以使用该变量进行循环
您的代码与修复脚本

此任务
这项任务
函数save（）{
var checkbox=document.getElementById（“whatever-1”）；
setItem（“whatever-1”，checkbox.checked）；
var checkbox2=document.getElementById（“whatever-2”）；
localStorage.setItem（“whatever-2”，checkbox2.checked）；
}
var checked=JSON.parse（localStorage.getItem（“whatever-1”）；
document.getElementById（“whatever-1”）.checked=checked；
var checked=JSON.parse（localStorage.getItem（“whatever-2”）；
document.getElementById（“whatever-2”）.checked=checked；
要检索所有可以使用的元素，请使用document.querySelectorAll
并将执行此任务的筛选器作为参数传递。在这种情况下，您希望检索所有htlm
元素，这些元素的类型
属性值等于复选框
。检索具有type=“checkbox”
的所有元素后，应遍历列表中的所有元素。对于每个元素，您应该将复选框的id存储为key
，将复选框的checked
存储为value

            var list = document.querySelectorAll(`[type*="checkbox"]`);
            list.forEach( el => {
            var checked = JSON.parse(localStorage.getItem(el.id));
            document.getElementById(el.id).checked = checked;
            });

代码如下：
    <script>
        save = function(){
            var list = document.querySelectorAll(`[type*="checkbox"]`);
            list.forEach( el => {
                localStorage.setItem(el.id, el.checked);
                console.log(el.id,el.checked);
            })

        }
    </script>

如果要使用cookie而不是本地存储来存储信息。有关详细信息的链接：

函数createCookie（cookieName、cookieValue、daysToExpire）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（daysToExpire*24*60*60*1000））；
document.cookie=cookieName+“=”+cookieValue+“expires=“+date.TogmString（）；
}
函数访问Cookie（cookieName）{
变量名称=cookieName+“=”；
var allCookieArray=document.cookie.split（“；”）；
对于（var i=0；i

使用本地存储的版本
<html>
<head>
</head>
<body>
    <div>
        <input type="checkbox" id="whatever-1" />This task
        <input type="checkbox" id="whatever-2" />This task
        <input type="checkbox" id="whatever-3" />This task
        <input type="checkbox" id="whatever-4" />This task
        <input type="checkbox" id="whatever-5" />This task
        <input type="button" value="Save" onclick="save();" />
    </div>
        <script>
            window.onload= function(){
                    var list = document.querySelectorAll(`[type*="checkbox"]`);
                    list.forEach( el => {
                        var checked = JSON.parse(localStorage.getItem(el.id));
                        document.getElementById(el.id).checked = checked;
                    });
            }
            save = function(){
            var list = document.querySelectorAll(`[type*="checkbox"]`);
            list.forEach( el => {
                localStorage.setItem(el.id, el.checked);
                console.log(el.id,el.checked);
            })

        }
    </script>
</body>
</html>


这项任务
这项任务
这项任务
这项任务
这项任务
window.onload=function（）{
var list=document.querySelectorAll（`[type*=“checkbox”]`）；
list.forEach（el=>{
var checked=JSON.parse（localStorage.getItem（el.id））；
document.getElementById（el.id）.checked=选中；
});
}
save=函数（）{
var list=document.querySelectorAll（`[type*=“checkbox”]`）；
list.forEach（el=>{
setItem（el.id，el.checked）；
控制台日志（el.id，el.checked）；
})
}

带COOKIE的版本
<html>
<head>
</head>
<body>
    <div>
        <input type="checkbox" id="whatever-1" />This task
        <input type="checkbox" id="whatever-2" />This task
        <input type="checkbox" id="whatever-3" />This task
        <input type="checkbox" id="whatever-4" />This task
        <input type="checkbox" id="whatever-5" />This task
        <input type="button" value="Save" onclick="save();" />
    </div>
        <script>
            window.onload= function(){
                    var list = document.querySelectorAll(`[type*="checkbox"]`);
                    list.forEach( el => {
                        var checked = JSON.parse(accessCookie(el.id));
                        document.getElementById(el.id).checked = checked;
                    });
            }
            save = function(){
                var list = document.querySelectorAll(`[type*="checkbox"]`);
                list.forEach( el => {
                    createCookie(el.id, el.checked,1);//1 is the day to expire
                    console.log(el.id,el.checked);
                })
            }
            function createCookie(cookieName, cookieValue, daysToExpire) {
                var date = new Date();
                date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
                document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
            }

            function accessCookie(cookieName) {
                var name = cookieName + "=";
                var allCookieArray = document.cookie.split(';');
                for (var i = 0; i < allCookieArray.length; i++) {
                    var temp = allCookieArray[i].trim();
                    if (temp.indexOf(name) == 0)
                        return temp.substring(name.length, temp.length);
                }
                return "";
            }
    </script>
</body>
</html>


这项任务
这项任务
这项任务
这项任务
这项任务
window.onload=function（）{
var list=document.querySelectorAll（`[type*=“checkbox”]`）；
list.forEach（el=>{
var checked=JSON.parse（accessCookie（el.id））；
document.getElementById（el.id）.checked=选中；
});
}
save=函数（）{
var list=document.querySelectorAll（`[type*=“checkbox”]`）；
list.forEach（el=>{
createCookie（el.id，el.checked，1）；//1是到期日
控制台日志（el.id，el.checked）；
})
}
函数createCookie（cookieName、cookieValue、daysToExpire）{
变量日期=新日期（）；
日期设定时间（da）
<html>
<head>
</head>
<body>
    <div>
        <input type="checkbox" id="whatever-1" />This task
        <input type="checkbox" id="whatever-2" />This task
        <input type="checkbox" id="whatever-3" />This task
        <input type="checkbox" id="whatever-4" />This task
        <input type="checkbox" id="whatever-5" />This task
        <input type="button" value="Save" onclick="save();" />
    </div>
        <script>
            window.onload= function(){
                    var list = document.querySelectorAll(`[type*="checkbox"]`);
                    list.forEach( el => {
                        var checked = JSON.parse(localStorage.getItem(el.id));
                        document.getElementById(el.id).checked = checked;
                    });
            }
            save = function(){
            var list = document.querySelectorAll(`[type*="checkbox"]`);
            list.forEach( el => {
                localStorage.setItem(el.id, el.checked);
                console.log(el.id,el.checked);
            })

        }
    </script>
</body>
</html>

<html>
<head>
</head>
<body>
    <div>
        <input type="checkbox" id="whatever-1" />This task
        <input type="checkbox" id="whatever-2" />This task
        <input type="checkbox" id="whatever-3" />This task
        <input type="checkbox" id="whatever-4" />This task
        <input type="checkbox" id="whatever-5" />This task
        <input type="button" value="Save" onclick="save();" />
    </div>
        <script>
            window.onload= function(){
                    var list = document.querySelectorAll(`[type*="checkbox"]`);
                    list.forEach( el => {
                        var checked = JSON.parse(accessCookie(el.id));
                        document.getElementById(el.id).checked = checked;
                    });
            }
            save = function(){
                var list = document.querySelectorAll(`[type*="checkbox"]`);
                list.forEach( el => {
                    createCookie(el.id, el.checked,1);//1 is the day to expire
                    console.log(el.id,el.checked);
                })
            }
            function createCookie(cookieName, cookieValue, daysToExpire) {
                var date = new Date();
                date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
                document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
            }

            function accessCookie(cookieName) {
                var name = cookieName + "=";
                var allCookieArray = document.cookie.split(';');
                for (var i = 0; i < allCookieArray.length; i++) {
                    var temp = allCookieArray[i].trim();
                    if (temp.indexOf(name) == 0)
                        return temp.substring(name.length, temp.length);
                }
                return "";
            }
    </script>
</body>
</html>