如何使用JavaScript读取sessionStorage并替换HTML占位符

直接通过JavaScript读取sessionStorage中的值，替换对应链接的href属性即可，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<ul>
  <li><a id="email" href="{email]">click me</a></li>

  <li><a id="yt" href="{youtube}">click me</a></li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 从sessionStorage获取对应值，无存储值时用#作为默认链接
    const savedEmail = sessionStorage.getItem('email') || '#';
    const savedYoutube = sessionStorage.getItem('youtube') || '#';

    // 更新对应链接的href属性
    document.getElementById('email').href = savedEmail;
    document.getElementById('yt').href = savedYoutube;
});
</script>
</body>
</html>

关键点说明 #

• DOM加载时机：用DOMContentLoaded事件确保代码在页面所有DOM元素渲染完成后执行，避免出现找不到目标元素的问题。
• 值的获取与兜底：sessionStorage.getItem()读取存储的值，若未存储过对应键值，会返回null，这里用|| '#'设置默认链接，防止无效跳转。
• 精准替换：通过元素ID直接定位到目标链接，直接修改href属性，比字符串替换占位符更高效可靠。

内容的提问来源于stack exchange，提问作者Zahin