Update lưu trạng thái cho chức năng sắp xếp nhận xét theo thời gian cho Threaded Comments

Từ bài viết của tác giả hung1001 tại bài viết này và mình chỉ update thêm tính năng lưu trạng thái sắp xếp vào localStorage.
Mình sẽ hướng dẫn lại từ đầu nhé!

<div class='sort-comment'>
        <span class='sort-title'>Sort by</span>
        <div class='sort-sel'>
           <select class='sort-option'>
              <option selected='selected' value='newest'>Newest</option>
              <option value='oldest'>Oldest</option>
           </select>
        </div>
</div>

.sort-comment{text-align:right}
.sort-comment .sort-title{font-size:14px;display:inline-block;margin-right:3px}
.sort-comment .sort-sel{display:inline-block;position:relative}
.sort-comment .sort-sel::after,.sort-comment .sort-sel::before{position:absolute;content:"";right:7px;border-style:solid;border-width:4px;width:0;height:0}
.sort-comment .sort-sel::after{top:2px;border-color:transparent transparent #333}
.sort-comment .sort-sel::before{bottom:2px;border-color:#333 transparent transparent}
.sort-comment .sort-sel .sort-option{cursor:pointer;background:#fff;border:1px solid #aaa;padding:2px 20px 2px 7px;color:#656565;font-size:14px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-appearance:window;-webkit-appearance:none;outline:0}

Đoạn JS bên dưới mình đã update để có thêm tính năng lưu trạng thái

$.fn.reverseChildren = function() {
    return this.each(function() {
        var $this = $(this);
        $this.children().each(function() {
            $this.prepend(this);
        });
    });
};
function reverseCommentsOrder() {
    $(".comments-content ol").reverseChildren();
}
$(document).ready(function() {
    if (localStorage.getItem("commentsOrder") === "reversed") {
        reverseCommentsOrder();
    }
});
$(".sort-option").on("change", function() {
    reverseCommentsOrder();
    localStorage.setItem("commentsOrder", "reversed");
});

Lưu ý: Template của bạn phải có thư viện jQuery mới hoạt động
Chúc anh em một ngày vui! 😁