dom事件-刷新后的JavaScript评级

dom events - JavaScript Rating after refreshpage

本文关键字：JavaScript 评级 刷新 事件 dom      更新时间：2023-09-26

我有一个JavaScript函数来显示评级。当用户点击星级评级时，我需要显示"感谢您的评级";消息，当用户刷新页面时，我需要显示"感谢您的评分";消息，而不是"评价这篇文章"。下面是我的代码，有人能帮我吗?

<script type="text/javascript">

var sMax;   // Isthe maximum number of stars
var holder; // Is the holding pattern for clicked state
var preSet; // Is the PreSet value onces a selection has been made
var rated;
// Rollover for image Stars //

function rating(num){
    sMax = 0;   // Isthe maximum number of stars
    for(n=0; n<num.parentNode.childNodes.length; n++){
        if(num.parentNode.childNodes[n].nodeName == "A"){
            sMax++; 
        }
    }
    
    if(!rated){
        s = num.id.replace("_", ''); // Get the selected star
        a = 0;
        for(i=1; i<=sMax; i++){     
            if(i<=s){
                document.getElementById("_"+i).className = "on";
                document.getElementById("rateStatus").innerHTML = num.title;    
                holder = a+1;
                a++;
            }else{
                document.getElementById("_"+i).className = "";
            }
        }
    }
}
// For when you roll out of the the whole thing //
function off(me){
    if(!rated){
        if(!preSet){    
            for(i=1; i<=sMax; i++){     
                document.getElementById("_"+i).className = "";
                document.getElementById("rateStatus").innerHTML = me.parentNode.title;
            }
        }else{
            rating(preSet);
            document.getElementById("rateStatus").innerHTML = document.getElementById("ratingSaved").innerHTML;
        }
    }
}
// When you actually rate something //
function rateIt(me){
    if(!rated){
        document.getElementById("rateStatus").innerHTML = document.getElementById("ratingSaved").innerHTML + " :: "+me.title;
        preSet = me;
        rated=1;
        sendRate(me);
        rating(me);
    }
}
// Send the rating information somewhere using Ajax or something like that.
function sendRate(sel){
    alert("Your rating was: "+sel.title);
}

</script>


<form id="form1">

<span id="rateStatus">Rate This Article:</span>
<span id="ratingSaved">Thank you for rating.</span> 
<div id="rateMe" title="Rate Me...">
    <a onclick="rateIt(this)" id="_1" title="ehh..." onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_2" title="Not Bad" onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_3" title="Pretty Good" onmouseover="rating(this)" onmouseout="off(this)"></a>
</div>

您需要在用户对文章进行评分后立即保存cookie，并在再次加载页面时检查cookie值，以确认文章是否已经加载。

或者，如果您正在刷新页面，您也可以从服务器获取这篇文章的当前评级

这里有几个选项，您的操作将取决于您的需求。

最大的问题是持久性。因此，如果我对某件事进行了评价并收到了感谢信息，那么当我在手机浏览器或另一台电脑上的浏览器上查看同一页面时，我是否应该看到同样的信息?否则，它只是一个消息，需要显示一次，你不关心如果我看到"请评分"选项后再次?

根据你关于在页面刷新之间保存状态的问题，听起来你的需求更倾向于保存持久性。

最终，保证永久保存评级状态的唯一方法是将其绑定到后端(服务器)应用程序上的用户帐户。这样，当我从其他浏览器查看同一页面时，或者经过很长一段时间后，服务器可以在数据库中查找并看到"Geuis对此进行了评级，显示了感谢消息"。

如果您只需要在短时间内显示Thank you，您可以将键存储在临时缓存中，如memcache。在每次刷新页面时，一小段javascript可以向缓存服务器发出xhr请求，以检查我是否对页面进行了评级。最终，这个键会从缓存中掉出来，所以也许在一个小时或一天后，当我回去看这个页面时，我就会被提示对这个页面进行评级。这是一个半永久性的解决方案，但它可以在任何设备或浏览器上工作，只要它绑定到一个帐户。

最脆弱，但最容易实现的解决方案是纯客户端。在这里，您的选择是a)将评级/未评级的值存储在cookie中，或者b)使用localStorage。在任何一种情况下，它都将存储状态。但是 cookie和localStorage不会在设备或浏览器之间传输。localStorage不会过期，但cookie最终会过期。此外，用户最终可以决定清除他们的cookie和localStorage缓存，并将状态设置回"给我打分"。

我没有提供任何代码示例，因为我希望您可以看到，答案确实首先在中，正是您试图在持久性范围内完成的内容。

我想说的是，真的没有匿名的永久存在。也就是说，你不能让一个用户匿名访问你的网站，但却以一种在浏览器之间传输的方式永久保存他们的投票状态。你有有一些类似于服务器端帐户来做到这一点。

相关文章：