JQuery Подсчет одометра — объедините с localstorage, чтобы сохранить номер ⇐ Jquery

[Anonymous]

Я использую jQuery Odometer, чтобы показать число, которое увеличивается каждую секунду, начиная с # 12508 (см. фрагмент кода # one ниже). После загрузки страницы число увеличивается, пока пользователь не уйдет. Когда пользователь возвращается, все начинается заново с заданного номера # 12508.
Однако я хотел бы сохранить ранее достигнутый номер с помощью localstorage, как в примере #two ниже. p>
Мне нужна помощь, чтобы объединить эти фрагменты, чтобы он загружал стили одометра и начальный номер, но сохранял локальное хранилище при перезагрузке.
Вот что у меня есть на данный момент:
Пример №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;
}

Код: Выделить всё

0,000

Пример № 2. Концепция локального хранилища:< /p>
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;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... ain-number