记录单击的链接，然后在框中将页面名称显示为历史记录

Question

我正在尝试记录一个单击的链接，然后在一个框中显示所有单击的链接。 我希望该框显示页面和名称的小图像。 另外，我想让用户在图片下方显示的页面停留时间。 框中的图像也应该是该页面的可点击链接。 有谁知道我应该使用HTTP cookie还是jquery？

我找到的最接近的内容是： http : //mtrpcic.github.io/pathjs/

（唯一的问题是它不记录单击的HTTP链接。）

---

任何帮助将不胜感激！ 先感谢您。

<img src="http://domain.com/image.png" onclick="save_data()" name="server" id="saveServer"/>
<div id='linkList'><script>
var links = [];
function saveLink(that){
    links[links.length] = that.element.src;
    document.getElementById('linkList').innerHTML += that.element.src+"<br>";
}
</script></div>


 <script> function saveData(){ var input = document.getElementById("saveServer"); localStorage.setItem("server", input.value); var storedValue = localStorage.getItem("server"); } 

 </script>

这是正确的吗？

Answer 1

要记录单击的链接，您可以根据需要提供3个选项。

1. 使用链接作为参数在onClick事件上调用javascript函数，并将链接保存到数组中，然后在需要时使用它。

2. 使用链接作为参数在onClick事件上调用javascript函数，然后将链接保存到javascript本地存储中（如果您不知道该链接是什么，请使用google存储）。 即使客户端重新启动计算机，您也将能够显示链接。 （localstorage保存在本地日期数据库中，因此，一点了解客户端可以编辑条目，因此根据您的需求这是否有用）

3. 在onClick事件上使用链接作为参数调用javascript函数，并发送ajax请求以将链接保存到日期库中。 您需要一个帐户系统，如果您不想实施该系统，第二种方法会更好。

还有另一种选择（我个人使用）。 使用本地存储并同步到日期数据库，这将使加载和保存速度更快（如果做得很好）。

例：

<script>
var links = [];
function saveLink(that){
    links[links.length] = that.element.src;
    document.getElementById('linkList').innerHTML += that.element.src+"<br>";
}
</script>
<img src="http://domain.com/image.png" onClick="saveLink(this);" />
<div id='linkList'></div>