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

Posted 2023-05-07

【中文标题】如何保存链接 html 并将其转移到另一个页面以供以后使用？

【英文标题】：How to save a link html and transfer it to another page to use later?

【发布时间】：2015-04-28 15:15:18

【问题描述】：

我正在做一个学校网站项目，但我想做的事情一败涂地。

我有一个使用 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");

这里是网站的一些截图。

搜索页面：

餐厅详情：

【参考方案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));

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

【讨论】：

谢谢，这将解决我的问题！另外，它很容易理解：P 谢谢！ :)

嗨，泰德，只有一个问题。当我使用您上面建议的锚点时，我注意到它传递的不是餐厅的全名，比如直到一个空格，例如，如果餐厅名称是“Rox Hotel”，它只会在 URL 中传递“Rox”。知道为什么吗？ :) 顺便说一句，您可以在这里尝试该站点：koemdzhiev.byethost18.com/search.html 但您必须启用 CORS：/

@GeorgiKoemdzhiev -- 答案已更新。我将哈希名称包装在 encodeURIComponent(...) 中。为您解决了这个问题（以及其他可能会弹出与号等的问题）

我喜欢在里面使用“Hooters”这个名字。好翅膀。 ^_^ 这个问题的答案和方法很好。

没问题。祝项目顺利。 :)

【参考方案2】：

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

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

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

这篇文章How can I get query string values in JavaScript? 上有一个很好的函数，用于使用 JavaScript 读取 QueryString 值。

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

【讨论】：

感谢您的快速回复，戴夫！ :)

任何时候。建议的两个答案都非常有效，另一个肯定更直接和简化。这种方法对于发送更多信息或更复杂的数据更有用。

是的，我注意到你的例子有点复杂，但我可能不得不坚持下去，因为当我通过 url 传递我的餐厅名称时，它不会传递完整的姓名。例如，如果餐厅的名称是“Fox Hotel”，它将只传递“Fox”。

那是因为 " " 字符打破了它。请参阅 Ted 答案的编辑。参数（哈希）必须是 URL 编码的，所以 " " = "%20"