Question

所以我想在每篇新闻文章上都有一个评分系统。有点像reddit实际上你可以在每个帖子上投票和downvote。现在，我通过点击按钮动态改变分数。现在，我如何动态地将所有不同的分数保存到localStorage，还是将它存储在数据库中更好？

import React from "react";

    import Up from "./UpDown/Up";
    import Down from "./UpDown/Down";

    export default class Vote extends React.Component {

        constructor(){
            super();
            this.state =  {
                score: 0, 
                voted: 0, 
                imgup: "img/upvote.png", 
                imgdown: "img/downvote.png",
                ident: 0
            };
        }

        saveStorage(key, val) {
            localStorage.setItem(key, val);
        } 

        handleChangeUp(){

            // ===========================skip this part
            const {voted, score, imgup, imgdown, ident} = this.state;
            var x = this.state.score;

            if (!voted) {
                this.setState({voted: 1, score: x+=1, imgup: "img/upvote-clicked.png"});
            }
            else if(Math.abs(voted)){
                if (voted == 1){
                    this.setState({voted: 0, score: x-=1, imgup: "img/upvote.png"});
                }
                else if (voted == -1){
                    this.setState({voted: 1, score: x+=2, imgup: "img/upvote-clicked.png", imgdown: "img/downvote.png"});
                }
            }
            //===============================
            x = this.state.score;
            this.saveStorage(ident, x);
        }

        handleChangeDown(){

            //================================skip this part
            const {voted, score, imgup, imgdown, ident} = this.state;
            var x = this.state.score;

            if (!voted) {
                this.setState({voted: -1, score: x-=1, imgdown: "img/downvote-clicked.png"});
            }
            else if(Math.abs(voted)){
                if (voted == 1){
                    this.setState({voted: -1, score: x-=2, imgup: "img/upvote.png", imgdown: "img/downvote-clicked.png"});
                }
                else if (voted == -1){
                    this.setState({voted: 0, score: x+=1, imgdown: "img/downvote.png"});
                }
            }
            //==============================================
            x = this.state.score;
            this.saveStorage(ident, x);
        }

        render(){
            const vote = {fontFamily: "'Hack', 'Arial'", fontSize: "13px", textAlign: "center", margin: "auto", marginTop: "0px", marginBottom: "0px", color: "#4d4d4d", fontWeight: "700"};
            const pos = {width: "35px", marginLeft: "2px", marginRight: "2px"}

            const { score, imgup, imgdown } = this.state;
            var { id } = this.props;

            return(

                <div class="col-xs-2 " style={pos} >
                    <div class="row ">

                        <div onClick={this.handleChangeUp.bind(this)} style={{cursor: "pointer"}}>
                            <Up imgURL = {imgup} />
                        </div>

                        <div style={vote}>
                            {score}
                        </div>

                        <div onClick={this.handleChangeDown.bind(this)} style={{cursor: "pointer"}}>
                            <Down imgURL = {imgdown} />
                        </div>

                    </div>
                </div>          
            );
        }
    }

我现在遇到的问题是我不知道如何将this.props.id传递给handleChangUp和handleChangeDown函数。所以无论我按哪个文章，键都是0，因为它是默认的val。存储的分数会延迟1次点击。

因此，当我按下upvote时，它在网站上显示1，但存储为0.如果我取消选中该upvote，它将撤消upvote并在网站上显示0，但存储1。

另外，请给我关于代码本身的建议，我知道这是一个完整的混乱，并且可能有一种更有效的方式来做我正在做的事情。

由于

Answer 1

您需要一个数据库。 LocalStorage适用于本地计算机。 LocalStorage将无法让您获得所有客户的全部投票。

当用户清除浏览器缓存时，它也会消失。当您需要在视图/页面更改之间存储数据而无需进行API调用（使网站感觉更快）时，使用LocalStorage非常棒 - 但它并不打算以您希望的方式使用。

如何动态保存到localStorage？

1 个答案: