Rails中刷新页面保留随机数，切换页面可更新的实现方案

嘿，这个需求其实挺典型的，我给你分享几个实用的解决方案，你可以根据自己的场景选：

方案一：用URL参数传递随机种子 #

这个思路很直接，核心是把随机数的种子存在URL的查询参数里：

• 当第一次加载页面、切换页面或者更新输入数据时，生成一个新的随机种子（比如Math.floor(Math.random() * 1000000)），然后用history.replaceState把种子加到URL里（比如?quizSeed=123456），避免页面跳转。
• 每次页面刷新时，先从URL里读取这个种子，用它初始化一个可复现的伪随机数生成器（PRNG），这样就能生成和之前完全一样的随机数序列了。

为什么要用伪随机数生成器？因为原生的Math.random()不能指定种子，所以得自己实现一个，比如这个轻量的Mulberry32算法：

function mulberry32(seed) {
  return function() {
    seed += 0x6D2B79F5;
    let t = seed;
    t = Math.imul(t ^ t >>> 15, t | 1);
    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
    return ((t ^ t >>> 14) >>> 0) / 4294967296;
  }
}

// 使用示例：从URL取种子，初始化随机函数
const urlParams = new URLSearchParams(window.location.search);
const seed = urlParams.get('quizSeed') || Math.floor(Math.random() * 1000000);
const getRandom = mulberry32(parseInt(seed));

// 每次调用getRandom()都会得到相同序列的随机数（同一个seed下）

优点：不依赖会话存储，多标签页之间互不干扰，刷新页面完全保留随机状态；缺点：URL会多一个参数，不过大部分用户不会在意这个。

方案二：SessionStorage + 输入数据哈希 #

如果不想让URL带参数，可以结合SessionStorage和输入数据的哈希值来做：

• 每次页面加载时，先把当前的输入数据（比如用户上传的内容、选择的配置）转成字符串，生成一个哈希值（简单点可以自己写个哈希函数，或者用JSON.stringify(inputData)后取字符串的编码和）。
• 从SessionStorage里读取之前存的种子和对应的输入哈希：
  • 如果当前输入哈希和存储的哈希一致，说明是刷新页面，直接用存储的种子生成随机数；
  • 如果哈希不一致（说明切换了页面或者输入数据更新了），就生成新的种子，同时把新种子和新哈希存回SessionStorage。

示例代码大概是这样：

// 简单的哈希函数（把字符串转成数字哈希）
function getStringHash(str) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = ((hash << 5) - hash) + str.charCodeAt(i);
    hash |= 0; // 转成32位整数
  }
  return hash.toString();
}

// 假设inputData是你的输入数据对象
const inputData = { /* 你的输入内容 */ };
const inputHash = getStringHash(JSON.stringify(inputData));
const storedData = sessionStorage.getItem('quizGeneratorState');

if (storedData) {
  const { seed, lastInputHash } = JSON.parse(storedData);
  if (lastInputHash === inputHash) {
    // 刷新页面，复用种子
    const getRandom = mulberry32(parseInt(seed));
    // 用getRandom生成选择题
  } else {
    // 输入数据变化，生成新种子
    const newSeed = Math.floor(Math.random() * 1000000);
    const getRandom = mulberry32(newSeed);
    // 更新SessionStorage
    sessionStorage.setItem('quizGeneratorState', JSON.stringify({
      seed: newSeed,
      lastInputHash: inputHash
    }));
  }
} else {
  // 首次加载，初始化种子
  const newSeed = Math.floor(Math.random() * 1000000);
  const getRandom = mulberry32(newSeed);
  sessionStorage.setItem('quizGeneratorState', JSON.stringify({
    seed: newSeed,
    lastInputHash: inputHash
  }));
}

优点：URL保持干净，会话内自动管理状态；缺点：SessionStorage是标签页级别的，同一个会话的不同标签页如果输入不同，可能会互相覆盖状态（不过一般切换页面/更新输入都是在同一个标签页操作，影响不大）。

方案三：LocalStorage + 页面/输入标识 #

如果需要跨浏览器会话保留状态（比如用户关闭浏览器再打开，还能回到之前的随机状态），可以把SessionStorage换成LocalStorage，同时给存储的key加上页面的路径标识和输入哈希：

const pagePath = window.location.pathname;
const storageKey = `quiz_seed_${pagePath}_${inputHash}`;
// 后续逻辑和方案二一样，只是把sessionStorage换成localStorage

这样不同页面、不同输入数据会对应不同的存储项，互相不干扰，而且状态会持久化到本地。缺点：需要考虑清理旧的存储数据，避免占用用户空间。

总结 #

• 优先选方案一：如果不介意URL带参数，多标签页友好，实现最简单；
• 选方案二：如果想要干净的URL，且主要在单个标签页操作；
• 选方案三：如果需要跨会话保留状态。

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