sessionStorage存储点赞ID出现前导逗号、空元素问题如何修复

出现前导逗号和空元素的核心原因有3个：

• 首次初始化sessionStorage的like字段时，写入了空字符串''，空字符串调用split(',')会直接得到['']，本身就携带一个空元素。
• 读取存储值时没有做非空兜底，也没有过滤读取后数组里的空值，导致初始的空字符串元素一直留在数组里。
• 存入数组时没有手动转成标准的逗号分隔字符串，直接把数组传入setItem会触发隐式类型转换，数组里的空元素会被转成空字符串拼接，最终形成前导逗号。

把原有两个函数替换为以下实现即可：

function likeAnnunci(){
    let likeBtn = document.querySelectorAll('.like');
    likeBtn.forEach(btn => {
        btn.addEventListener('click', function(){
            let id = btn.getAttribute('ann-id');
            // 读取时做非空兜底，同时过滤所有空值
            const storageVal = sessionStorage.getItem('like');
            let storage = storageVal ? storageVal.split(',').filter(Boolean) : [];

            if(storage.includes(id)){
                storage = storage.filter(item => item !== id);
            } else {
                storage.push(id);
            }
            // 手动拼接字符串存入，避免隐式转换产生多余符号
            sessionStorage.setItem('like', storage.join(','));

            console.log(sessionStorage.getItem('like').split(','));
            btn.classList.toggle('fas');
            btn.classList.toggle('far');
            btn.classList.toggle('tx-main');
        })
    })
};

function setLike(id){
    const storageVal = sessionStorage.getItem('like');
    if(!storageVal){
        sessionStorage.setItem('like', '');
        return 'far';
    }
    // 读取时同步过滤空值，避免判断失效
    const storage = storageVal.split(',').filter(Boolean);
    return storage.includes(id.toString()) ? 'fas' : 'far';
}

修复后效果验证：首次点赞ID为1的广告时，存储值为1，分割后得到['1']；继续点赞ID为7的广告时，存储值为1,7，分割后得到['1','7']，不会再出现前导逗号、首个元素为空字符串的问题。

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