如何实现KPR红绿灯按钮状态：刷新/其他按钮点击前持久保持

核心问题 #

当前代码仅在页面运行时临时修改红绿灯颜色，刷新或页面跳转后会重置为初始红色，需要通过浏览器本地存储实现状态持久化，让颜色状态在页面重新加载后依然保留。

修改后的完整代码 #

<h2><span style="color: #000000;">Are we meeting our KPR?</span></h2>

<div>
  <svg id="svg1" style="width: 310px;
        height: 310px;
        background-color: #333;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;">
    <circle cx="155" cy="155" id="circle1" r="130" style="fill: red; stroke: black; stroke-width: 2"></circle>
    <circle cx="155" cy="155" id="circle2" r="130" style="fill: transparent; stroke: black; stroke-width: 2"></circle>
  </svg>
</div>

<p><span style="color: #FFFFFF;"></span></p>

<details open="">
  <summary></summary>
  <span style="color: #FFFFFF;"> </span>
  <p><span style="color: #FFFFFF;">
    <button id="yesBtn" type="button">Yes</button>
    <button id="noBtn" type="button">No</button>
  </span></p>
  <span style="color: #FFFFFF;"> </span>
</details>

<script>
// 获取红绿灯圆形元素
const trafficLight = document.getElementById('circle1');
// 获取两个按钮元素
const yesBtn = document.getElementById('yesBtn');
const noBtn = document.getElementById('noBtn');

// 页面加载时读取本地存储的状态，设置对应颜色
function loadSavedState() {
  const savedStatus = localStorage.getItem('kprStatus');
  if (savedStatus === 'yes') {
    trafficLight.style.fill = '#33CC33';
  } else {
    // 默认显示红色
    trafficLight.style.fill = 'red';
  }
}

// 将状态保存到浏览器本地存储
function saveStatus(status) {
  localStorage.setItem('kprStatus', status);
}

// 给Yes按钮绑定点击事件：变绿+保存状态
yesBtn.addEventListener('click', function() {
  trafficLight.style.fill = '#33CC33';
  saveStatus('yes');
});

// 给No按钮绑定点击事件：变红+保存状态
noBtn.addEventListener('click', function() {
  trafficLight.style.fill = 'red';
  saveStatus('no');
});

// 页面加载完成后自动执行初始化
window.onload = loadSavedState;
</script>

关键改动说明 #

• 本地存储持久化：使用浏览器自带的localStorage存储状态，数据会一直保留在浏览器中，除非手动清除或通过代码删除。
• 分离事件逻辑：把原来写在按钮标签内的onclick事件移到独立的<script>标签中，结构更清晰，也更易维护。
• 初始化加载：添加window.onload事件，页面打开时自动读取之前保存的状态，自动设置对应的红绿灯颜色。
• 修正按钮ID语义：把原按钮的no/yesID改为yesBtn/noBtn，避免ID与按钮功能混淆。

使用方式 #

直接将这段代码替换你原来的内容，粘贴到Liferay的网页内容框中即可。点击"Yes"按钮红绿灯变绿，点击"No"按钮变红，刷新页面或跳转到其他页面再返回，状态都会保持不变。

内容的提问来源于stack exchange，提问作者Hannah.Rowe