Как сохранить ссылку html и перенести ее на другую страницу, чтобы использовать ее позже?

Question

Я делаю проект веб-сайта школы, и я ударяю по скале тем, что я хочу сделать.

У меня есть страница поиска, которая использует API Google Адресов и ищет близлежащие места и отображает их на странице. Название каждого места (ресторана) - это тег абзаца в теге ссылки, который приводит к другой странице, которую я хочу заполнить информацией с страницы предварительного просмотра. Как я могу сохранить все, что пользователь нажал в переменной, например имя ресторана, и использовать эту переменную на другой странице, чтобы заполнить местозаполнитель «The Restaurant».

Это код JQuery страницы поиска, которая заполняет страницу поиска с результатами:

for(var i = 0;i<Object.keys(jsondata.results).length;i++){ 
     if(jsondata.results[i].name !== undefined){ 
      if(jsondata.results[i].photos !== undefined){ 
       photoRef = jsondata.results[i].photos[0].photo_reference; 
       //alert(photoRef); 
      } 
      //alert(searchedResultsPhotos); 
      $(".col-md-7").append("<div><img class=col-md-3 alt=restaunrant_image src="+searchedResultsPhotos+"/>" 
       +"<a href=RestaurantTemplate.html><p class=restaurant_name col-md-7>"+jsondata.results[i].name+"</p></a></div"); 
     } 

    } 
    $(".col-md-7 div").addClass("row"); 

Вот некоторые скриншоты сайта.

страница Поиск:

Ресторан детали:

Answer 1

Отправить имя или значение, которое вы хотите отобразить в качестве параметра QueryString, и прочитать параметр на новой странице ,

QueryString - это значение «? Key = value & key2 = value», которое вы видите в URL-адресе после пути. Если вы просто читаете это через JavaScript на новой странице, вы можете использовать объект «location» для получения параметров.

var query = location.search; 

Если у вас есть на стороне сервера язык используется, как правило, можно прочитать параметр «Query» из параметра «Запрос».

for (var i = 0; i < Object.keys(jsondata.results).length; i++) { 
    if (jsondata.results[i].name !== undefined) { 
     if (jsondata.results[i].photos !== undefined) { 
      photoRef = jsondata.results[i].photos[0].photo_reference; 
      //alert(photoRef); 
     } 
     //alert(searchedResultsPhotos); 
     var name = jsondata.results[i].name; 
     $(".col-md-7").append("<div><img class=col-md-3 alt=restaunrant_image src=" + searchedResultsPhotos + "/>" 
      + "<a href=RestaurantTemplate.html?name=" + name + "><p class=restaurant_name col-md-7>" + name + "</p></a></div"); 
    } 

} 
$(".col-md-7 div").addClass("row"); 

Существует хорошая функция на этом посту How can I get query string values in JavaScript? для чтения значения QueryString с помощью JavaScript.

Кроме того, если вы используете этот подход, вы можете добавить несколько значений, которые вы, возможно, захотите прочитать. Если вы хотите больше, чем просто имя, например местоположение, адрес или что-то еще, вы можете передать это в QueryString. Вот для чего это.

Answer 2

Используйте эту линию, где вы создаете свой якорный элемент:

'<a href="RestaurantTemplate.html#'+encodeURIComponent(jsondata.results[i].name)+'"><p class="restaurant_name col-md-7">'+jsondata.results[i].name+'</p></a></div>' 

Например, если название ресторана был Hooters, страница URL в браузере (если страница RestaurantTemplate загружается) будет что-то вроде http://www.yourdomain.com/RestaurantTemplate.html#Hooters

Затем на странице RestaurantTemplate, вы можете использовать эту линию JavaScript для получения имени:

var name = decodeURIComponent(window.location.hash.substr(1)); 

Th при вытягивании части «Hooters» с примера URL-адрес