JavaScript是否有结合localStorage与用户会话的函数？多用户点赞问题求助

问题描述 #

开发的Web应用支持用户对帖子点赞/取消点赞，当前用localStorage存储点赞状态，但同一设备切换用户登录后，前一位用户的点赞状态仍保留，导致新用户无法正常操作，且sessionStorage不符合需求。

当前代码问题 #

你当前的代码用了一个全局的liked键存储状态，既没有关联用户唯一标识，也没有区分不同帖子，导致所有用户、所有帖子共用同一个状态，切换用户后自然会出现冲突。

var liked = "false";

if(!localStorage.getItem('liked')){
    localStorage.setItem('liked', 'false');
}

function like(id){  
    console.log(id);
    console.log("like button is clicked");
    let likes = Number(document.querySelector(`#likes_num_${id}`).innerText);
    console.log(likes);
    let liked = localStorage.getItem('liked');
    if(liked === 'false'){
        let likeNum = likes +=1;
    
        //like the post
        fetch(`/like/${id}`,{
            method: 'PUT',
            body: JSON.stringify({
                likes: likeNum
            })
        })

        localStorage.setItem('liked', 'true');
    }else{
        console.log("should be unliking");
        let likeNum = likes -=1;
    
        //unlike the post
        fetch(`/like/${id}`,{
            method: 'PUT',
            body: JSON.stringify({
                likes: likeNum
            })
        })
        
        localStorage.setItem('liked', 'false');
    }
}

可行解决方案 #

核心思路：将点赞状态与用户ID、帖子ID绑定 #

把localStorage的键名设计为liked_${用户ID}_${帖子ID}，这样每个用户对每个帖子的状态都是独立存储的，切换用户后只会读取当前用户的状态。

修改后的代码示例 #

首先需要从后端获取当前登录用户的唯一标识（比如用户ID），可以在页面渲染时注入到全局变量（根据后端模板引擎调整，比如Jinja2、EJS等）：

<script>
// 页面渲染时由后端注入当前用户ID
const currentUserId = '{{ current_user.id }}';
</script>

然后修改点赞函数：

function like(postId) {  
    const likesElement = document.querySelector(`#likes_num_${postId}`);
    let currentLikes = Number(likesElement.innerText);
    // 构造当前用户对该帖子的状态存储键
    const statusKey = `liked_${currentUserId}_${postId}`;
    const isLiked = localStorage.getItem(statusKey) === 'true';

    // 统一设置请求头，确保后端能正确解析JSON
    const fetchOptions = {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        }
    };

    if (!isLiked) {
        const newLikes = currentLikes + 1;
        fetchOptions.body = JSON.stringify({ likes: newLikes });
        
        fetch(`/like/${postId}`, fetchOptions)
            .then(res => res.json())
            .then(() => {
                // 请求成功后再更新本地状态和UI，避免数据不一致
                localStorage.setItem(statusKey, 'true');
                likesElement.innerText = newLikes;
            })
            .catch(err => console.error('点赞失败:', err));
    } else {
        const newLikes = currentLikes - 1;
        fetchOptions.body = JSON.stringify({ likes: newLikes });
        
        fetch(`/like/${postId}`, fetchOptions)
            .then(res => res.json())
            .then(() => {
                localStorage.setItem(statusKey, 'false');
                likesElement.innerText = newLikes;
            })
            .catch(err => console.error('取消点赞失败:', err));
    }
}

补充优化点 #

1. 页面初始化同步状态：用户登录后，从后端拉取该用户所有已点赞的帖子ID，批量初始化localStorage，确保页面加载时点赞状态与后端一致：

// 登录成功后调用
function syncLikedPosts(likedPostIds) {
    likedPostIds.forEach(postId => {
        const statusKey = `liked_${currentUserId}_${postId}`;
        localStorage.setItem(statusKey, 'true');
        // 同时更新对应帖子的点赞按钮样式（如果需要）
        const likeBtn = document.querySelector(`#like_btn_${postId}`);
        if (likeBtn) likeBtn.classList.add('liked');
    });
}

2. 登出时清除当前用户状态：用户登出时，删除localStorage中所有属于当前用户的点赞状态键，避免影响下一位用户：

function onLogout() {
    Object.keys(localStorage).forEach(key => {
        if (key.startsWith(`liked_${currentUserId}_`)) {
            localStorage.removeItem(key);
        }
    });
}

备选方案：完全依赖后端状态 #

如果不想依赖localStorage，可以每次点击点赞按钮前，先请求后端获取当前用户对该帖子的点赞状态，再执行对应操作。但这种方式会增加一次网络请求，体验稍差，但数据一致性更有保障。

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