JSFiddle - React, Tailwind, and code Playground
HTML
<div class="t">
?p=489&cpage=1#comments <span class="reset">[reset]</span>
</div>
<ul>
<li class="test">くまくまくま</li>
<li class="test">ねこねこねこ</li>
<li class="test">いぬいぬいぬ</li>
<li class="test">くまくまくま</li>
<li class="test">ねこねこねこ</li>
<li class="test">いぬいぬいぬ</li>
</ul>
<ul>
<li class="test">くまくまくま</li>
<li class="test">ねこねこねこ</li>
<li class="test">いぬいぬいぬ</li>
<li class="test">くまくまくま</li>
<li class="test">ねこねこねこ</li>
<li class="test">いぬいぬいぬ</li>
<li class="test">くまくまくま</li>
<li class="test">ねこねこねこ</li>
<li class="test">いぬいぬいぬ</li>
<li class="test">くまくまくま</li>
<li class="test">ねこねこねこ</li>
<li class="test">いぬいぬいぬ</li>
</ul>
CSS
ul {
counter-reset: olcount 0;
}
ul:last-child {}
ul li {
list-style: none;
}
ul li::before {
content: counter(olcount);
counter-increment: olcount;
margin-right: 1em;
}
JavaScript
(function($) {
$(function() {
var address = $(".t").text();
//var address = location.search; //本番用
var cpage = address.match(/cpage=(\d)/)[1];
//var p = location.search.match(/\?(.*?)&/);
//cpageが無いか1の時
if (cpage === null || cpage === "1") {
//その時のアイテム数を数える
//便宜上 ul:first
var licount = $("ul:first").find("li").length;
//これをwebストレージで覚えておく
sessionStorage.setItem(address, licount);
//console.log(sessionStorage.getItem(address))
$("ul:first").css({
"counter-reset": "olcount 0"
});
} else {
var rAddress = address.replace(/cpage=(\d)/, "cpage=1");
var count = sessionStorage.getItem(rAddress);
console.log(rAddress)
if (count) {
$("ul:last-child").css({
"counter-reset": "olcount " + count
});
} else {
$("ul:first").css({
"counter-reset": "olcount 0"
});
}
}
$(".t .reset").on("click", function(){
sessionStorage.clear();
var address = $(".t").text();
var rAddress = address.replace(/cpage=(\d)/, "cpage=1");
var count = sessionStorage.getItem(rAddress);
if (!count) {
alert("セッションストレージをクリアしました カウント→" + count)
}
});
});
})(jQuery);