How to checkboxes make changes to another page?

I'm hanging around at the project I'm working on. The solution of this problem will make me very comfortable. I am working on two html files. (checkbox.html and color.html) There are two checkboxes in the checkbox.html file. When these two checkboxes are checked, the color of the div in color.html needs to change. (.example must be red.) This action must be registered with localStorage. So the color in color.html should not have changed, even if refresh the page. When the checkboxes are pressed back, the old color must be turned. (must be blue). I try everything. It's javascript code is hard? What should I add?

FILES:

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">

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

Script.js

$('.edit-container input[type="checkbox"]').change(function() {
    var examplediv= document.getElementById("example")
    var container=$(this).parent('.edit-container2').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 files: checkbox.html --> http://jsfiddle.net/3DPLd/60/ color.html --> https://jsfiddle.net/uumkbkwo/12/ I can not place the localStorage code, I apologize.