如何存储ion range slider动态值并实现刷新保留与跨页调用？

咱们分两步来解决你的需求：先让页面刷新后滑块值不丢失，再实现跳转页面时把选中的时间添加为新行。

一、页面刷新后保留滑块选中值 #

核心思路是滑块初始化时读取本地存储的值，滑块选择完成后把值写入本地存储。

代码实现 #

// 初始化小时滑块
$("#hour").ionRangeSlider({
  min: 0,
  max: 23,
  // 优先从localStorage读取历史值，没有则用默认0
  from: parseInt(localStorage.getItem("selectedHour")) || 0,
  // 用户停止拖动滑块后，把选中值存入localStorage
  onFinish: function(data) {
    localStorage.setItem("selectedHour", data.from);
  }
});

// 初始化分钟滑块
$("#minute").ionRangeSlider({
  min: 0,
  max: 59,
  from: parseInt(localStorage.getItem("selectedMinute")) || 0,
  onFinish: function(data) {
    localStorage.setItem("selectedMinute", data.from);
  }
});

说明 #

• 用onFinish事件而不是实时触发的onChange，避免频繁读写本地存储，性能更友好；
• 读取值时用parseInt转换类型，因为localStorage存的都是字符串；
• 加|| 0做兜底，确保第一次使用时滑块有默认值。

二、跳转页面时添加选中值为新行 #

这需要两个页面配合：滑块所在页面负责把当前时间存入历史记录，目标页面负责读取记录并渲染新行。

1. 滑块页面：跳转前保存当前时间到历史记录 #

假设你有一个跳转按钮，给它绑定点击事件：

$("#jumpBtn").click(function() {
  // 读取当前选中的小时和分钟
  const selectedHour = localStorage.getItem("selectedHour") || 0;
  const selectedMinute = localStorage.getItem("selectedMinute") || 0;
  const timeText = `${selectedHour}小时${selectedMinute}分钟`;

  // 读取已有的时间历史记录，没有则初始化空数组
  let timeHistory = JSON.parse(localStorage.getItem("timeHistory")) || [];
  // 添加当前时间到历史记录（如果不想重复添加，可先判断数组中是否已存在）
  timeHistory.push(timeText);
  // 把更新后的历史记录存回localStorage
  localStorage.setItem("timeHistory", JSON.stringify(timeHistory));

  // 跳转到目标页面（替换成你的目标页面路径）
  window.location.href = "your-target-page.html";
});

2. 目标页面：加载时渲染历史记录为新行 #

在目标页面的JS中添加页面加载事件，读取历史记录并渲染：

window.addEventListener("load", function() {
  // 获取列表容器（假设你的列表容器id是timeRecordList）
  const listContainer = document.getElementById("timeRecordList");
  // 读取历史记录
  const timeHistory = JSON.parse(localStorage.getItem("timeHistory")) || [];

  // 遍历历史记录，逐个添加为新行
  timeHistory.forEach(timeItem => {
    const newRow = document.createElement("li"); // 用div或li根据你的页面结构调整
    newRow.textContent = timeItem;
    listContainer.appendChild(newRow);
  });
});

可选优化 #

如果不想重复添加相同的时间记录，可以在push前加个判断：

if (!timeHistory.includes(timeText)) {
  timeHistory.push(timeText);
}

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