跨页面通过JavaScript函数为div元素赋值的实现方案

嘿，我来帮你搞定这个跨页面给进度条div赋值的问题！结合你的场景——从compare.jsp跳转至results.jsp后用JS更新那个levenshtein-distance进度条，这里有两种靠谱的实现方式，你可以根据需求选择：

方法一：通过URL参数传递相似度值 #

这种方式简单直接，适合允许参数暴露在URL中的场景：

1. 在compare.jsp中传递参数 #

当用户点击「比较」按钮、拿到相似度值后，跳转时把值作为URL参数带上：

// 假设你已经通过函数获取到了相似度值（比如85.5）
const similarity = 85.5; 
// 跳转至results.jsp并携带参数
window.location.href = `results.jsp?similarity=${similarity}`;

2. 在results.jsp中读取并更新进度条 #

页面加载完成后，提取URL参数并赋值给目标div，同时注意更新ldBar插件的状态：

// 封装一个获取URL参数的工具函数
function getUrlParam(paramName) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(paramName);
}

// 等待页面DOM加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
    const similarityValue = getUrlParam('similarity');
    if (similarityValue) {
        const ldBarElement = document.getElementById('levenshtein-distance');
        // 更新data-value属性
        ldBarElement.setAttribute('data-value', similarityValue);
        // 如果ldBar插件需要手动触发更新，调用它的set方法
        if (window.ldBar) {
            ldBarElement.ldBar.set(similarityValue);
        }
    }
});

方法二：使用sessionStorage存储值（不暴露在URL） #

如果不想把相似度值显示在URL里，可以用sessionStorage（同域名下有效，关闭浏览器后自动清除）：

1. 在compare.jsp中存储值 #

const similarity = 85.5;
// 将值存入sessionStorage
sessionStorage.setItem('docSimilarity', similarity);
// 跳转页面
window.location.href = 'results.jsp';

2. 在results.jsp中读取并更新进度条 #

window.addEventListener('DOMContentLoaded', () => {
    const similarityValue = sessionStorage.getItem('docSimilarity');
    if (similarityValue) {
        const ldBarElement = document.getElementById('levenshtein-distance');
        ldBarElement.setAttribute('data-value', similarityValue);
        // 手动更新ldBar
        if (window.ldBar) {
            ldBarElement.ldBar.set(similarityValue);
        }
        // 用完后移除存储的值，避免下次页面加载时残留
        sessionStorage.removeItem('docSimilarity');
    }
});

注意事项 #

• 确保相似度值是有效的数字格式（比如你的double类型转成字符串传递没问题，ldBar支持数字字符串）；
• 如果你的相似度值是后端函数返回的，其实也可以直接在后端把值放入request属性，在results.jsp中用${similarity}直接渲染data-value，但既然你要求用JavaScript赋值，上面的两种前端方式就很合适；
• 一定要等DOM加载完成后再执行赋值逻辑，否则会找不到目标div元素。

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