如何利用localStorage避免网页刷新时图表CandleBar数据丢失？

首先看你现有代码的两个明显问题：

1. 加载逻辑中重复调用了tvWidget.load：你修改了getAutoSaveData里的symbol后已经调用了tvWidget.load(getAutoSaveData)，但紧接着又调用tvWidget.load(JSON.parse(localStorage.getItem('autoSaveStorage')))，这会把刚修改的配置覆盖掉，导致加载的是未更新symbol的旧数据。
2. onAutoSaveNeeded事件的触发时机可能不包含CandleBar数据更新的场景：这个事件通常是图表布局、指标配置变化时触发，不一定会在新的K线（CandleBar）数据加载时触发，所以最新的K线数据不会被保存。

针对你的问题：

关于保存时机的选择 #

• 可以在刷新前立即执行保存：通过监听beforeunload事件，在页面刷新或关闭时触发保存操作，确保最后一刻的数据被存入localStorage。但要注意，浏览器对beforeunload中的异步操作有时间限制，如果tvWidget.save是异步的，可能存在保存不完整的风险。
• 更可靠的方式是结合「数据变化时实时保存」+「刷新前兜底保存」：如果图表库提供了CandleBar数据更新的回调事件，每次新K线生成或数据更新时就调用保存；如果没有这类事件，就用beforeunload兜底，同时确保onAutoSaveNeeded的场景都被覆盖。

修复后的代码示例 #

第一步：修复加载逻辑 #

if(localStorage.getItem("autoSaveStorage")){
    const getAutoSaveData = JSON.parse(localStorage.getItem('autoSaveStorage'));
    // 更新symbol配置
    getAutoSaveData.charts[0].panes[0].sources[0].state.symbol = Datafeed.urlParameter.fullname;
    // 只调用一次load
    tvWidget.load(getAutoSaveData);
    // 同步更新标题
    const lastClosedPrice = localStorage.getItem("lastClosedPrice");
    document.getElementById('tradVuTitle').innerHTML = `${Datafeed.urlParameter.symbol} ${lastClosedPrice || ''}`;
}

第二步：添加刷新前兜底保存 #

// 监听页面刷新/关闭事件，触发保存
window.addEventListener('beforeunload', function() {
    tvWidget.save(function(res) {
        localStorage.setItem('autoSaveStorage', JSON.stringify(res));
        // 同时记得把lastClosedPrice也存入localStorage（如果需要的话）
        // 假设你能获取到最新的收盘价，比如从tvWidget或Datafeed中获取
        // const latestPrice = ...;
        // localStorage.setItem("lastClosedPrice", latestPrice);
    });
});

第三步：确保数据变化时的保存（如果有对应事件） #

如果你的图表库（看起来是TradingView Widget）有数据更新的事件，比如实时tick回调，可以添加监听：

// 示例：假设tvWidget有onRealTimeTick事件（根据实际API调整）
tvWidget.subscribe("onRealTimeTick", function(tickData) {
    // 每次实时数据更新时保存
    tvWidget.save(function(res) {
        localStorage.setItem('autoSaveStorage', JSON.stringify(res));
        // 更新lastClosedPrice
        localStorage.setItem("lastClosedPrice", tickData.close);
    });
});

额外检查点 #

• 确认tvWidget.save返回的res对象中确实包含了最新的CandleBar数据：可以在控制台打印res，查看是否包含你需要保留的K线数据。如果save方法只保存布局配置，不包含K线数据，那你需要单独把K线数据存入localStorage，而不是依赖tvWidget.save的结果。
• 检查localStorage的存储上限：localStorage最大存储量约为5MB，如果K线数据量很大，可能需要做数据裁剪（比如只保留最近N条K线）。

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