记住来自其他页面的选定字段或先前保存在用户帐户中的字段

Question

我想知道是否有人知道我如何能够显示所选字段是否先前在其他页面上选择了所选字段。所以，如果＆＃39; .clicked＆＃39;是活跃的，因为在不同的页面上选择然后＆＃39; .border＆＃39;将有＆＃39; .showBorder＆＃39;根据以下工作示例在相关领域积极参与

＆＃13;

＆＃13;

// Get references to the two sets of boxes
var numbers = document.querySelectorAll(".clicked");
var letters = document.querySelectorAll(".border");

// Turn each node list into proper arrays:
numbers = Array.prototype.slice.call(numbers);
letters = Array.prototype.slice.call(letters);

// Loop through all the number boxes
numbers.forEach(function(box, index) {

  // Set up the click event handlers for all the number boxes
  box.addEventListener("click", function() {

    // Remove borders from each of the letter boxes
    letters.forEach(function(box) {
      box.classList.remove("showBorder");
    });

   // Apply the border to only the one clicked element
    var info = document.getElementsByClassName('box-tip')[0];


    if (index > 2) {
      info.style.left = 11 + ((index - 3) * 45) + 'px';
    }
    else {
    info.style.left = 0 + 'px';
    }
    info.style.visibility = 'visible';

    letters[index].classList.add("showBorder");

  });

});


$(document).on("click", '.clicked', function(){
    $('.clicked').removeClass('selected');
    $(this).addClass('selected');
});

＆＃13;

.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:15px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:15px auto;padding:0;}
.showBorder { border: 1px dashed #233354; }
.box-tip {
  display:inline;
  margin: auto;
	position: relative;
	visibility: hidden;
  padding-left:10px;
 }

.numberCircle {
  border-radius: 90%;
  font-size: 12px;
  border: 2px solid #000;
  color: #fff;
  background: #000;
  padding: 0 4px;
}

.numberCircle span {
  text-align: center;
  display: block;
}

li.selected {color:#fff;background-color:#000;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-box">
  <li class="clicked">1</li>
  <li class="clicked">2</li>
  <li class="clicked">3</li>
  <li class="clicked">4</li>
  <li class="clicked">5</li>
  <li class="clicked">6</li>
  <li class="clicked">7</li>
  <li class="clicked">8</li>
</ul>
<div class="box-tip">
  <span class="info">Regular length for your collar size</span>
  <span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
  <li class="border">a</li>
  <li class="border">b</li>
  <li class="border">c</li>
  <li class="border">d</li>
  <li class="border">e</li>
  <li class="border">f</li>
  <li class="border">g</li>
  <li class="border">h</li>
</ul>

＆＃13;

＆＃13;

＆＃13;