Есть ли способ запомнить состояние нажатия одной из многочисленных кнопок после перехода с домашней страницы?

Question

У меня есть выпадающее меню, которое содержит множество кнопок. И когда нажимается одна из этих кнопок, она изменяет общее фоновое изображение страницы и два других изображения вместе с ней. Каждая из этих кнопок связана с разными изображениями. Чего я хочу добиться, так это того, что если кто-то нажимает на одну из этих кнопок, он запоминается, когда люди переходят на любую другую страницу на том же сайте.

Скорее незнаком с jQuery (только совсем недавно окунувшись в него), поэтомумои попытки были довольно ... простыми. Я чувствую, что мое решение лежит с помощью sessionStorage, но мне не удалось применить его к моему сценарию, поскольку он содержит несколько кнопок / опций. Это скрипт, с которым я работаю:

<script>
jQuery(document).ready(function($){
$('.tony').on({
'click': function(){
$('.sidebarimgtop').attr('src','https://i.imgur.com/tJPF58T.png');
$('.sidebarimgbottom').attr('src','https://i.imgur.com/7pPbjpR.png');
$("body").css('background-image', 'url(https://i.imgur.com/WOqyufE.png)');
 }   

$('.ezio').on({
'click': function(){
$('.sidebarimgtop').attr('src','https://i.imgur.com/orXH355.png');
$('.sidebarimgbottom').attr('src','https://i.imgur.com/CWXpT1c.png');
$("body").css('background-image', 'url(https://i.imgur.com/UEiclnW.png)');
 }

$('.oberyn').on({
'click': function(){
$('.sidebarimgtop').attr('src','https://i.imgur.com/ragcux5.png');
$('.sidebarimgbottom').attr('src','https://i.imgur.com/tToH5jK.png');
$("body").css('background-image', 'url(https://i.imgur.com/l21z868.png)');
 }
});    
</script>

Answer 1

Локальное хранилище - это то, что вы, вероятно, захотите использовать для этого. Для каждого из ваших событий onclick вы захотите добавить строку, сохраняющую имя класса того, что было нажато, например:

$('.oberyn').on('click', function () {
    localStorage.setItem('background-style', 'oberyn');

    // your code
})

И затем в функции onready вы захотитепроверьте это значение и примените соответствующие наборы изображений

$(document).on('ready', function () {
  if (localStorage.getItem('background-style') !== '') {
    let style = localStorage.getItem('background-style');

    switch (style) {
      case 'tony':
        $('.sidebarimgtop').attr('src', 'https://i.imgur.com/ragcux5.png');
        $('.sidebarimgbottom').attr('src', 'https://i.imgur.com/tToH5jK.png');
        $("body").css('background-image', 'url(https://i.imgur.com/l21z868.png)');
        break;
      case 'ezio':
        $('.sidebarimgtop').attr('src', 'https://i.imgur.com/orXH355.png');
        $('.sidebarimgbottom').attr('src', 'https://i.imgur.com/CWXpT1c.png');
        $("body").css('background-image', 'url(https://i.imgur.com/UEiclnW.png)');
        break;
      case 'oberyn':
        $('.sidebarimgtop').attr('src', 'https://i.imgur.com/ragcux5.png');
        $('.sidebarimgbottom').attr('src', 'https://i.imgur.com/tToH5jK.png');
        $("body").css('background-image', 'url(https://i.imgur.com/l21z868.png)');
        break;

      default:
        break;
    }
  }
});