làm thế nào để giữ class active khi load lại page trong javascript sử dụng localstorage

bạn phải đặt id hoặc class riêng biệt cho mỗi menu. mỗi lần lưu lại vào localStorage thì b lưu cái id. mỗi cái id cho từng menu phải khác nhau. Sau đấy khi b load lại trang thì bạn so sánh cái id trùng với div nào thì bạn add thêm class active cho div đó chứ không phải là lưu vào localStorage đều chung tên active như vậy thì nó biết cái nào là đang active chứ nhỉ. Với đoạn code của bạn có thành sửa thành như sau :

$(document).ready(function(){
        var menuClass = localStorage.getItem('menuClass')

        var element = document.getElementById(menuClass);

        if (element) {
          element.classList.add('active');
        } else {
          element = document.getElementById("home");
          element.classList.add('active');
        }

        $(".toggle").click(function () {
          $(this).toggleClass("active");
          $('.navigation').toggleClass("active");
        });

        $(document).on('click', 'ul .list', function () {
          let menu = $(this).attr("id")

          $(this).addClass('active').siblings().removeClass('active');

          localStorage.setItem('menuClass', menu);
        })
})

Lưu ý thêm id và xóa hết tất cả class active cho mỗi menu để chạy được nhé !

mỗi 1 lần bạn load lại trang thì mọi thứ coi như clear hoàn toàn, nên nếu bạn muốn lưu lại menu của bạn giữa các lần load trang thì cách đơn giản nhất là đẩy cái trạng thái menu của bạn vào localStorage:

// Mỗi khi có thay đổi
localStorage.set('menu', menuClass) // menuClass là biến (string) chứa tên class css của bạn

// Khi trang được load lên
window.onload = function() {
  const menuClass = localStorage.get('menu')
 console.log(menuClass)
.....
}