如何保存一个link html 并转移到另一个页面以备后用？

Question

我正在做一个学校网站项目，但遇到了我想做的事情。

我有一个搜索页面，它使用 Google 个地点 API 并搜索附近的地点并将它们显示在页面上。每个地方（餐厅）的名称都是 link 标签中的一个段落标签，该标签指向另一个页面，我想用预览页面中的信息填充该页面。我如何保存用户在变量中单击的任何内容，例如餐厅名称，并在另一个页面中使用此变量来填充占位符 "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 是您在路径后的 URL 中看到的“?key=value&key2=value”。如果您只是在新页面上通过 JavaScript 阅读此内容，则可以使用 "location" 对象来获取参数。

var query = location.search;

如果您使用服务器端语言，通常可以从 "Request" 参数中读取 "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");

这个 post How can I get query string values in JavaScript? 上有一个很好的函数，用于使用 JavaScript.

读取 QueryString 值

此外，如果您使用这种方法，您可以添加多个您可能想要阅读的值。如果您想要的不仅仅是名称，如位置、地址或其他内容，您可以在 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));

从示例中提取 'Hooters' 部分 URL

如何保存一个link html 并转移到另一个页面以备后用？

How to save a link html and transfer it to another page to use later?

html

api

variables

jquery

save