如何在JavaScript中加载默认下拉选项并实现默认图表持久化

问题背景 #

用户提供的HTML表单：

<label for="alternativeGraph">Alternative graphs could be seen here:</label>
<select id="selGraph" onchange="graphUpdate()" aria-label="Graph">
       <option value="1" selected="selected">Graph 1 (default)</option>
       <option value="2">Graph 2</option>
       <option value="3">Graph 3</option>
       <option value="4">Graph 4</option>
       <option value="5">Graph 5</option>
   </select>
<button type="button" onclick="setDefault()"> Change default graph</button>

对应的JavaScript代码：

function render(filename) {
fetch(filename).then(response  => response.text()).then(textAsString => 
    renderString(textAsString));
}

function graphUpdate(){
   let value = document.querySelector('#selGraph');
   let graph = ["graph_1.gv", "graph_2.gv", "graph_3.gv", "graph_4.gv", "graph_5.gv"]
   render(graph[value.selectedIndex]);
}

// function setDefault(){ # I am not sure about what should be added here...
//     let new_default_graph = document.querySelector("#selGraph");
//     new_default_graph.value = 
// }

当前存在的问题：页面加载时，虽然Graph1被设置为默认选中项，但对应的graph_1.gv文件并未自动加载，只有切换下拉框选项后图表才会显示。

问题1：实现页面加载时自动加载默认图表 #

页面初始化阶段没有触发graphUpdate()函数，导致默认图表未加载。只需在页面加载完成后调用一次该函数即可，有两种实现方式：

方式一：通过JavaScript监听页面加载事件 #

在现有JS代码末尾添加以下代码：

// 页面加载完成后自动执行图表加载
window.addEventListener('load', graphUpdate);

或者直接调用函数：

graphUpdate();

方式二：通过HTML的body标签触发 #

修改页面的<body>标签，添加onload属性：

<body onload="graphUpdate()">

两种方式都能让页面加载完成后，自动读取默认选中的Graph1并加载对应的graph_1.gv文件。

问题2：完善setDefault()函数，刷新页面后保留用户设置的默认图表 #

要实现刷新后保留设置，需要利用浏览器的localStorage存储用户选择的默认图表索引。以下是完整的修改方案：

1. 完善setDefault()函数 #

替换原有注释的函数为：

function setDefault(){
    let selGraph = document.querySelector("#selGraph");
    // 将当前选中的图表索引存储到localStorage
    localStorage.setItem('defaultGraphIndex', selGraph.selectedIndex);
    alert('默认图表已设置，刷新页面后生效');
}

2. 修改页面初始化逻辑，读取本地存储的设置 #

将之前的页面加载触发代码替换为以下内容，确保页面加载时优先读取用户设置的默认值：

window.addEventListener('load', function() {
    let selGraph = document.querySelector('#selGraph');
    // 读取localStorage中存储的默认图表索引
    let defaultIndex = localStorage.getItem('defaultGraphIndex');
    if (defaultIndex !== null) {
        // 更新下拉框的选中状态
        selGraph.selectedIndex = defaultIndex;
    }
    // 加载对应的图表
    graphUpdate();
});

这样用户点击"Change default graph"按钮后，当前选中的图表索引会被保存在本地存储中，下次页面刷新时会自动选中该选项并加载对应的图表。

内容的提问来源于stack exchange，提问作者Hoang Cuong Nguyen