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

做ref="/tag/184/" style="color:#EB6E00;font-weight:bold;">图像处理网页功能时，经常要调整亮度、对比度、饱和度这些参数。每次刷新页面，设置全没了，得重新调，挺烦人的。其实用 JavaScript 的 localStorage，几行代码就能把用户调好的参数记住。

为什么用 localStorage

localStorage 是浏览器自带的存储功能，关了页面也不丢数据。不像 cookie 还要来回传给服务器，它只存在本地，简单又高效。比如你做个在线修图工具，用户喜欢高对比+低饱和的风格，存一下，下次打开直接加载，体验就好多了。

怎么存图像处理的设置

假设你有个调节器，控制三个值：亮度、对比度、饱和度。它们通常用 slider 控制，对应三个 input 元素。

<input type="range" id="brightness" min="0" max="200" value="100">
<input type="range" id="contrast" min="0" max="200" value="100">
<input type="range" id="saturate" min="0" max="200" value="100">

当用户拖动滑块时，把当前值保存到 localStorage：

document.querySelectorAll('input[type="range"]').forEach(input => {
    input.addEventListener('input', function() {
        const settings = {
            brightness: document.getElementById('brightness').value,
            contrast: document.getElementById('contrast').value,
            saturate: document.getElementById('saturate').value
        };
        localStorage.setItem('imageFilters', JSON.stringify(settings));
    });
});

页面加载时恢复设置

刷新后，原来的滑块位置和图片效果都得还原。页面加载时从 localStorage 读取，再赋值回去就行。

window.onload = function() {
    const saved = localStorage.getItem('imageFilters');
    if (saved) {
        const settings = JSON.parse(saved);
        
        document.getElementById('brightness').value = settings.brightness;
        document.getElementById('contrast').value = settings.contrast;
        document.getElementById('saturate').value = settings.saturate;
        
        // 同时应用滤镜到图片
        applyFilters(settings);
    }
};

function applyFilters(settings) {
    const img = document.getElementById('preview-img');
    img.style.filter = `brightness(${settings.brightness}%) contrast(${settings.contrast}%) saturate(${settings.saturate}%)`;
}

这样用户哪怕关掉标签页，过两天再打开，上次调的风格还在。像是手机相册里“最近使用滤镜”的感觉，顺手。

注意点

localStorage 只能存字符串，对象得用 JSON.stringify 转一下。读的时候再 JSON.parse 回来。别忘了加判断，万一没存过，getItem 会返回 null，解析会报错。

另外，不同域名的数据是隔离的。你在 localhost 测试存的值，上线到正式域名就看不到，这正常，别以为功能坏了。