求助：为jQuery缩放按钮添加Local Storage后功能异常

我想给页面的放大、缩小按钮添加LocalStorage功能，让页面刷新或重新打开时能记住之前的缩放状态，但写的代码无法正常工作，求帮忙排查问题。

相关代码 #

HTML 缩放按钮 #

<div class="me-4">
    <button id="zoom-out" class="btn btn-zoom" data-value="zoom-out"><i class="fas fa-search-minus"></i></button>
    <button id="zoom-in" class="btn btn-zoom" data-value="zoom-in"><i class="fas fa-search-plus"></i></button>
</div>

HTML 内容区域 #

<section id="content" class="card card-body mt-2">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus maiores mollitia consequuntur? Cum
        commodi debitis et. Voluptates et provident, cum voluptate voluptatum alias, delectus asperiores atque
        magni, fugit eveniet laborum!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro blanditiis velit modi maxime quam, labore recusandae repellat tenetur unde in harum asperiores qui corporis vero ullam provident quisquam at voluptas laudantium expedita placeat ad? Corporis quod amet harum maiores omnis!</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur sequi velit laboriosam maxime
        nostrum necessitatibus aliquam iste reprehenderit numquam! Aliquid minus magni corporis magnam
        consequuntur minima sint beatae, sit voluptatum?</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis modi placeat incidunt at voluptatibus, quibusdam, perspiciatis eligendi obcaecati perferendis maiores animi, eum vel aspernatur doloremque fugit et quasi soluta beatae dolorum rem ducimus saepe! Ipsam adipisci modi quo, dignissimos facere accusamus omnis enim eaque sint perspiciatis quos vel tempore doloribus.</p>
</section>

原JS代码 #

$(document).ready(function(){
   var getContent = $("#content");

    /* =============================== Local Storage =================================*/
    const savedZoom = localStorage.getItem('Zoom');

    if(savedZoom){
        $(getContent).css("fontSize", savedZoom);
    }
    
    /* =============================== BUTTON ZOOM =================================*/
    $(".btn-zoom").click(function(){
        var btnZoom = $(this).attr('data-value');
        console.log(btnZoom);

        $(".btn-zoom").each(function(){
            /* =============================== ZOOM OUT =================================*/
            if(btnZoom == "zoom-out"){
                var presentSize = getContent.css('fontSize');
                var latestSize = parseInt(presentSize.replace("px", "")) - 1;
                $(getContent).css("fontSize", latestSize + "px");
                // console.log(latestSize + "px");
            }
            /* =============================== ZOOM IN =================================*/
            if(btnZoom == "zoom-in"){
                var presentSize = getContent.css('fontSize');
                var latestSize = parseInt (presentSize.replace ("px", "")) + 1;
                $(getContent).css ("fontSize", latestSize + "px");
                // console.log(latestSize + "px");
            }
            saveZoom (btnZoom)
        })
    })

}
function saveZoom(btnZoom){
    localStorage.setItem("Zoom" , btnZoom)
}

问题排查与修正 #

核心错误点 #

1. 保存数据类型错误：当前保存到LocalStorage的是按钮的data-value（zoom-in/zoom-out），而非实际字体大小值。刷新后把字符串zoom-in赋值给fontSize，不符合CSS属性要求，完全无效。
2. 冗余按钮遍历：点击单个按钮时遍历所有.btn-zoom元素，导致saveZoom被执行两次，且始终保存按钮标识而非当前字体大小。
3. 语法错误：$(document).ready的闭合括号缺失，直接导致整个JS代码无法正常执行。

修正后的代码 #

$(document).ready(function(){
    var getContent = $("#content");
    const STORAGE_KEY = 'contentFontSize';

    // 初始化：读取保存的字体大小
    const savedSize = localStorage.getItem(STORAGE_KEY);
    if(savedSize){
        getContent.css("fontSize", savedSize);
    } else {
        // 无保存数据时，设置默认值并存储
        const defaultSize = getContent.css("fontSize");
        localStorage.setItem(STORAGE_KEY, defaultSize);
    }

    // 缩放按钮点击事件
    $(".btn-zoom").click(function(){
        var btnZoom = $(this).attr('data-value');
        var presentSize = parseInt(getContent.css('fontSize').replace("px", ""));
        var latestSize;

        if(btnZoom === "zoom-out"){
            latestSize = presentSize - 1;
        } else if(btnZoom === "zoom-in"){
            latestSize = presentSize + 1;
        }

        // 应用新字体大小
        getContent.css("fontSize", `${latestSize}px`);
        // 保存最新值到LocalStorage
        localStorage.setItem(STORAGE_KEY, `${latestSize}px`);
    });
});

修正说明 #

• 修复了$(document).ready的语法错误，确保代码正常执行。
• 改为保存实际字体大小值（如16px）到LocalStorage，而非按钮标识。
• 初始化逻辑补充了默认值存储，避免首次打开无数据的情况。
• 移除冗余的按钮遍历逻辑，点击按钮后直接计算并保存最新字体大小。

内容的提问来源于stack exchange，提问作者Guar Dian