JS ＜a＞标签Link拼接

一、问题说明

在一次工作中，需要通过a标签实现跳转，并且get跳转携带参数。但是我又不希望参数缺失时系统报错，更不希望前端与后台耦合度太高。问题截图。

需要实现点击评论后get携参跳转对应页。

最初想法

<div class="comment-count">

    旧
	<!-- <a href="musicCommentList.jsp" target="_blank" rel="noopener noreferrer"> -->
   	<%-- <a href="musicCommentList.jsp?id=<%=request.getParameter("id")%>" target="_blank" rel="noopener noreferrer"> --%>
   	<%-- <a href="musicCommentList.jsp?id=${music_id} target="_blank" rel="noopener noreferrer"> --%>
    
    新
   	<a id="linktocomment">
   	评论: <span id="comment-count">00</span>
	</a>	
</div>

二、问题解决

因为跳转形式时新增页、新增选项卡。最便捷的方式是通过URL传递数据。

使用LocalStorage？

与 sessionStorage 不同，localStorage 在同一浏览器的所有标签页之间是共享的。您可以在原始页面设置 localStorage.setItem("music_id", musicId);，然后在新页面中获取这个值。但请注意，因为 localStorage 的数据是持久化的，所以在使用完毕后应该清除这些数据，以避免造成数据污染。

sessionStorage 缺点？

在浏览器的不同选项卡（tab）之间，sessionStorage 是不共享的，每个选项卡都有自己独立的 sessionStorage 存储空间。这意味着在一个选项卡中使用 sessionStorage.setItem("music_id", musicId); 存储的数据，在另一个新开的选项卡中是无法直接获取到的。

如果希望在不同选项卡之间共享数据，可以考虑使用 localStorage 来替代 sessionStorage。localStorage 中存储的数据在同一个域名下的不同选项卡之间是共享的，因此可以跨选项卡访问和修改。

tips：具体情况采用具体形式跳转（跳转方案未采取以上两种）

三、正确方案

html有 两个 a标签 分别为linktocomment、linktocomment1.捕获它们。

<script type="text/javascript">
	// 等待页面加载完成
	document.addEventListener("DOMContentLoaded", function() {
	    // 从sessionStorage中获取music_id的值
	    var musicId = sessionStorage.getItem("music_id");
	    
	    // 获取包含评论数的 a 标签
	    var link = document.getElementById("linktocomment");
	    var link1 = document.getElementById("linktocomment1");
	    
	    // 设置链接地址，替换其中的占位符为空
	    link.href = "musicCommentList.jsp?id=" + musicId;
	    link1.href = "musicCommentList.jsp?id=" + musicId;
	    
	 	// 在新标签页中打开链接
	    link.target = "_blank";
	    link1.target = "_blank";
	    
	    //安全属性
	    link.rel = "noopener noreferrer";
	    link1.rel = "noopener noreferrer";
	});
	</script>

四、最终效果

拼接后和如下相同。

<a href="musicCommentList.jsp?id=3" target="_blank" rel="noopener noreferrer">

五、安全性考虑

rel="noopener noreferrer" 是HTML中的一个属性，用于指定链接的打开方式和安全性

• noopener 是一个安全属性，它可以防止新打开的窗口访问原始页面的 window.opener 对象。这是一种防止钓鱼攻击和窃取用户信息的安全策略。
• noreferrer 也是一个安全属性，它禁止新打开的页面发送 Referer 头部信息。这有助于保护用户的隐私，防止原始页面的URL泄露给新打开的页面。