如何保存链接html并将其传输到另一个页面以供以后使用？

Question

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

我有一个使用 Google Places API 的搜索页面，可以搜索附近的地点并将其显示在页面上。每个地点（餐厅）的名称是链接标签内的段落标签，该链接标签通向我想要用预览页面中的信息填充的另一个页面。如何保存用户在变量中单击的任何内容（例如餐厅名称），并在另一个页面中使用此变量来填充占位符“餐厅”。

这是搜索页面的 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

使用此行创建锚元素：

'<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));

这会从示例 URL 中删除“Hooters”部分

Answer 2

将要显示的名称或值作为QueryString参数发送，并在新页面上读取该参数。

查询字符串是您在 URL 中的路径后面看到的“?key=value&key2=value”。如果您只是在新页面上通过 JavaScript 读取此内容，则可以使用“location”对象来获取参数。

var query = location.search;

如果您使用服务器端语言，通常可以从“请求”参数中读取“查询”参数。

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");

这篇文章有一个很好的功能如何在 JavaScript 中获取查询字符串值？用于使用 JavaScript 读取 QueryString 值。

此外，如果您使用此方法，您可以添加您可能想要读取的多个值。如果您想要的不仅仅是名称，例如位置、地址或其他内容，您可以在 QueryString 中传递它。这就是它的用途。