跨页面同步

最新推荐文章于 2024-09-22 11:17:00 发布

AIROU_ao

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量265

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/AIROU_ao/article/details/126816732

版权

利用本地存储实现跨页面复选框状态同步

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <input type="checkbox" class="ck" value="a">a
        <input type="checkbox" class="ck" value="b">b
        <input type="checkbox" class="ck" value="c">c
        <input type="checkbox" class="ck" value="d">d
        <input type="checkbox" class="ck" value="e">e
    </form>
    <script>
        var ipts = document.querySelectorAll('.ck')
        var arr = JSON.parse(localStorage.getItem('iptsArr')) || []


        for (var i = 0; i < arr.length; i++) {
            arr[i] = ipts[i].checked
        }
        localStorage.setItem('iptsArr', JSON.stringify(arr))


        for (var i = 0; i < ipts.length; i++) {
            ipts[i].setAttribute('index', i)
            ipts[i].onclick = function () {
                var index = this.getAttribute('index')
                arr[index] = !arr[index]
                localStorage.setItem('iptsArr', JSON.stringify(arr))
            }
        }
        window.addEventListener('storage', function (e) {
            if (e.key === 'iptsArr') {
                arr = JSON.parse(e.newValue)
                for (var i = 0; i < arr.length; i++) {
                    ipts[i].checked = arr[i]
                }
            }
        })




    </script>
</body>

</html>