I am using jQuery Odometer to show a number that counts upwards each second, starting at # 12508 (see code snippet #one below). Once the page loads the number increments until the user navigates away. When the user returns, it starts again from the set number # 12508.
However, I would like to retain the previously reached number using localstorage, as in the example #two below.
I need some help to combine these snippets so that it loads the Odometer styles and starting number, but retains the local storage on reload.
Here’s what I have so far:
Example #1 the Odometer code:
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>Example # 2 Local storage concept:
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>2
OK never mind, I figured it out and am answering my own question and posting this here for anyone who is looking for something similar
Note, the snippet in SO below appears broken due to Error “Uncaught SecurityError: Failed to read the ‘localStorage’ property from ‘Window’:”
However, the codepen works fine without issue.
https://codepen.io/SolaceBeforeDawn/pen/yLmyYQb
jQuery(document).ready(function ($) {
window.odometerOptions = {
format: "(,ddd).dd"
};
// settings
var counter = 12508;
if (typeof localStorage.getItem("counts") != "object") {
counter = parseInt(localStorage.getItem("counts"));
}
setInterval(function () {
$(".odometer").html(counter);
++counter;
localStorage.setItem("counts", 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>