用JavaScript localStorage保存图像处理参数的小技巧

在做网页ref="/tag/184/" style="color:#B2A89E;font-weight:bold;">图像处理工具时，用户调色、裁剪、滤镜等操作往往需要反复调整。每次刷新页面，设置就全没了，体验很不友好。这时候，JavaScript 的 localStorage 就派上用场了。

为什么用 localStorage 存图像参数？

比如你开发一个在线调亮暗、对比度的图片编辑器，用户好不容易调出满意的效果，一刷新页面，滑块回到默认值，心情肯定受影响。localStorage 能在浏览器本地持久保存数据，关掉再打开也还在，正好解决这个问题。

怎么存？简单几步搞定

假设你有一个对象，记录当前图片的处理参数：

const imageSettings = {
  brightness: 1.2,
  contrast: 1.5,
  saturation: 1.1,
  blur: 0.5
};

// 保存到 localStorage
localStorage.setItem('imageSettings', JSON.stringify(imageSettings));

// 从 localStorage 读取
const saved = localStorage.getItem('imageSettings');
if (saved) {
  const settings = JSON.parse(saved);
  // 恢复到 UI，比如设置滑块值
  document.getElementById('brightness').value = settings.brightness;
}

实际场景：记住上次用的滤镜组合

有个小功能是让用户快速切换“复古”、“黑白”、“暖色”等预设滤镜。每次点一下就写入一次：

function applyPreset(preset) {
  // 应用滤镜逻辑...
  document.body.style.filter = `brightness(${preset.b}) contrast(${preset.c})`;
  
  // 记住这个预设，下次打开直接加载
  localStorage.setItem('lastPreset', JSON.stringify(preset));
}

// 页面加载时尝试恢复
window.onload = function() {
  const last = localStorage.getItem('lastPreset');
  if (last) {
    applyPreset(JSON.parse(last));
  }
}

注意别存太多

localStorage 虽然方便，但容量有限，一般只有 5-10MB，不能用来存图片本身（比如 base64 编码的大图）。它适合存参数、配置、用户偏好这类轻量数据。真正的图像文件还得靠服务器或 IndexedDB。

清空缓存也要人性化

加个“恢复默认”按钮时，别忘了清除 localStorage 里的记录：

document.getElementById('resetBtn').addEventListener('click', function() {
  localStorage.removeItem('imageSettings');
  localStorage.removeItem('lastPreset');
  // 然后重置界面
});