jQuery 里程表计数 - 与本地存储结合以保留数字

Question

我正在使用 jQuery 里程表显示一个每秒向上计数的数字，从 # 12508 开始（请参阅下面的代码片段 #one）。页面加载后，数字就会递增，直到用户离开。当用户返回时，又从设定的号码#12508开始。

但是，我想使用本地存储保留之前达到的数量，如下面的示例#two 所示。

我需要一些帮助来组合这些片段，以便加载里程表样式和起始编号，但在重新加载时保留本地存储。

这是我到目前为止所拥有的：

示例 #1 里程表代码：

https://codepen.io/SolaceBeforeDawn/pen/KKOKeXL

jQuery(document).ready(function($) {
        window.odometerOptions = {
          format: '(,ddd).dd'
        };
  // var finalDigit 
  var finalDigit = 12508; // starting number
  setTimeout(function(){
      $('.odometer').html(finalDigit);
    }, 2000);
  setInterval(function(){
    finalDigit += 01;
      $('.odometer').html(finalDigit);
  }, 1000);  // increment of 1 second
        
});

.odometer{
  margin: 0 auto;
  text-align: center;
  font-size:2em;
  border: 1px solid black;
  border-radius: 6px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
<script src="https://unpkg.com/[email protected]/odometer.min.js"></script>

<div class="odometer">0,000</div>

示例#2 本地存储概念：

https://codepen.io/SolaceBeforeDawn/pen/NWQPGMG

function isLocalStorage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch(e) {
        return false;
    }
}

function setCounter(key, val) {
    localStorage.setItem(key, val);
}

function getCounter(key) {
    return localStorage.getItem(key);
}

(function() {
    
    var key = "myCounter";
    var counter = isLocalStorage() && getCounter(key) || 12508;
    var $placeholder = $(".count");
    $placeholder.html(counter);

    setInterval(function () {
        counter++;
        $placeholder.html(counter);
        isLocalStorage() && setCounter(key, counter);
    }, 1000);
}());

.count{
  font-size:18px;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="count"></div>

Answer 1

好吧，没关系，我想通了，正在回答我自己的问题，并将其发布在这里，供任何正在寻找类似内容的人

注意，下面的代码片段由于错误“Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window':”而出现损坏

但是，codepen 工作正常，没有问题。

https://codepen.io/SolaceBeforeDawn/pen/yLmyYQb

jQuery(document).ready(function ($) {
  window.odometerOptions = {
    // format: "(,ddd).dd"
  };
  // settings

  var counter = 12508;
  if (typeof localStorage.getItem("counts1") != "object") {
    counter = parseInt(localStorage.getItem("counts1"));
  }
  setInterval(function () {
    $(".odometer").html(counter);
    ++counter;
    localStorage.setItem("counts1", counter);
  }, 1000);
});

.odometer {
  margin: 0 auto;
  text-align: center;
  font-size: 2em;
  border: 1px solid black;
  border-radius: 6px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/odometer.min.js"></script>

<link rel="stylesheet" href="https://github.hubspot.com/odometer/themes/odometer-theme-default.css" />

<div class="odometer">0,000</div>