怎么通过HTML5中LocalStorage存储用户对网页版股票分时图的配色方案记忆-H5教程-PHP中文网

可以直接用 localStorage 保存分时图配色配置并自动恢复，包括分时线、均价线、涨跌背景、成交量柱子及网格线颜色，通过 JSON 序列化存储和解析，加载时合并默认值与用户设置，支持错误降级与 UI 同步。

怎么通过html5中localstorage存储用户对网页版股票分时图的配色方案记忆

可以直接用 localStorage 保存用户在网页中选择的分时图配色配置，比如 K 线颜色、成交量柱状图颜色、均线颜色等，下次打开页面时自动读取并应用。

定义可存的配色字段

分时图常见需记忆的视觉项包括：

分时线主色（如 #ff6b35）
均价线颜色（如 #2196f3）
涨跌背景色（上涨区域 #e8f5e9，下跌区域 #ffebee）
成交量柱子颜色（涨/跌分别设置）
网格线或坐标轴颜色

建议统一用一个 JS 对象管理，例如：

const chartTheme = {
  timeLine: '#ff6b35',
  avgLine: '#2196f3',
  upBg: '#e8f5e9',
  downBg: '#ffebee',
  volumeUp: '#4caf50',
  volumeDown: '#f44336',
  grid: '#e0e0e0'
};

保存配色到 localStorage

当用户通过颜色选择器（如）修改某一项时，立即更新并持久化：

document.getElementById('color-timeLine').addEventListener('change', function() {
  chartTheme.timeLine = this.value;
  localStorage.setItem('stockChartTheme', JSON.stringify(chartTheme));
});

也可封装一个通用保存函数：

function saveTheme(theme) {
  localStorage.setItem('stockChartTheme', JSON.stringify(theme));
}

页面加载时读取并应用配色

在图表初始化前，先尝试从 localStorage 恢复配置：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

let chartTheme = {
  timeLine: '#ff6b35',
  avgLine: '#2196f3',
  upBg: '#e8f5e9',
  downBg: '#ffebee',
  volumeUp: '#4caf50',
  volumeDown: '#f44336',
  grid: '#e0e0e0'
};

const saved = localStorage.getItem('stockChartTheme');
if (saved) {
  try {
    const parsed = JSON.parse(saved);
    chartTheme = { ...chartTheme, ...parsed }; // 保留默认值，覆盖用户设置项
  } catch (e) {
    console.warn('配色配置解析失败，使用默认值');
  }
}

// 然后将 chartTheme 传给绘图逻辑（如 ECharts、Canvas 或 SVG 渲染器）
initChart(chartTheme);