Попытка добавить идентификатор HTML к URL-адресу при нажатии

Question

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

Это код, который обрабатывает клики на домашней странице

var gridBtnsArray = $(".hero-btn");

$(".hero-btn").on("click" , function(){
    console.log($(".hero-btn").index(this));
    localStorage.setItem("indexValue", $(".hero-btn").index(this));
    window.document.location = './detail.html';
})

И я использую этот код для заполнения деталей на странице. html page.

console.log(localStorage.getItem("indexValue")); console.log(students[localStorage.getItem("indexValue")].name); console.log(students[localStorage.getItem("indexValue")].projectImages[0]);

То, что я хотел бы сделать, это щелкните одно из изображений на главном экране, чтобы перейти на страницу сведений (что сейчас происходит), но вместо URL-адреса это site.com/details.html. Хочу мне site.com/details#idName. Я также хотел бы найти способ поделиться этим URL-адресом и отправить вместе с ним локальный сохраненный объект, чтобы при совместном использовании открывалась правильная страница.

Answer 1

ha sh для страницы сохраняется в window.location.hash.

Итак, чтобы изменить значение ha sh для страницы:

window.location.hash = '#yourHashString'

Ref: Местоположение: ha sh

Если вы хотите перенаправить на новую страницу с ha sh, просто добавьте его в новый путь:

window.document.location = './detail.html' + '#yourHashString';

Чтобы воздействовать на вашу строку ha sh при загрузке страницы, сделайте что-то вроде этого:

window.onload = function () {
  let myHashString = window.location.hash;
  setupMyPage(myHashString);
}