复选框如何更改另一个页面？

Question

我正在忙于我正在进行的项目。这个问题的解决会让我很舒服。我正在处理两个 html 文件。 （checkbox.html 和 color.html） checkbox.html 文件中有两个复选框。当这两个复选框被选中时，color.html中的div的颜色需要改变。 （.example 必须为红色。）此操作必须在 localStorage 中注册。因此，即使刷新页面，color.html 中的颜色也不应该改变。当复选框被按下时，旧的颜色必须被翻转。 （必须是蓝色的）。我什么都试。它的javascript代码很难吗？我应该添加什么？

文件：

Color.html

<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="js/script.js"></script>

<div class="example"> </div>

Checkbox.html

<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="js/script.js"></script>

   

        <div class="edit-container">
        <input type="checkbox" id="a1" />
        <input type="checkbox" id="a2" />
        </div>
    
  

Script.js

$('.edit-container input[type="checkbox"]').change(function() {
    var examplediv= document.getElementById("example")
    var container=$(this).parent('.edit-container');
    
    if(container.find('#a1:checked,#a2:checked').length==2)
       
        examplediv.css('background','red');
    else
         examplediv.css('background','');    
})

Syle.css

.edit-container {width:100px; height:100px; background:green;}
.example {background:blue; width:200px; height:200px;}

jsfiddle 文件： checkbox.html --> http://jsfiddle.net/3DPLd/62/ color.html --> https://jsfiddle.net/uumkbkwo/14/ 我无法放置 localStorage 代码，我很抱歉。

Answer 1

有多种方法可以根据第一页的动作对第二页进行某些操作。在您的情况下，您应该使用 localStorage.setItem 和 localStorage.getItem 来完成这项工作。这将根据复选框将颜色存储在存储中，您可以在任何页面上检索它们。

Read More here

试试下面

//This is inside the checkbox.html

$('.edit-container input[type="checkbox"]').change(function() {

  var container = $(this).parent('.edit-container2').parent('.edit-container');

  if (container.find('#a1:checked,#a2:checked').length == 2) {
    localStorage.setItem('color', 'red')
  } else {
    localStorage.setItem('color', '')
  }
})

//This is inside the color.htmls

 $(document).ready(function() {
    let color = localStorage.getItem('color');

    $(".example").css('background', color);
 })