Question

我想使用localStorage来存储人gavatar的网址路径。

以下是我一直在努力的代码......我认为我很接近，但只需要帮助我们完成下一步/最后一步。

    <script type="text/javascript">
    if(typeof(Storage)!=="undefined")
    {
            if (localStorage.getItem("myAvatar") === null)
            {
                    <?php
                    $url = 'http://www.gravatar.com/avatar/' . md5(strtolower(trim('foo@foobar.com'))) . '?s=100&d=mm&r=g';
                    ?>
                    localStorage.setItem('myAvatar', '<?=$url;?>');
                    var myAvatar = '<?=$url;?>';
            }
            else
            {
                    var myAvatar = localStorage.getItem("myAvatar");
            }
    }
    else
    {
            var myAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?s=100&d=mm&r=g';
    }
    </script>
    <img id="avatar" src="http://www.gravatar.com/avatar/00000000000000000000000000000000?s=100&d=mm&r=g">
    <script type="text/javascript">
    document.getElementById('avatar').src = 'myAvatar';
    </script>

我知道把JavaScript放在javascript里面并不是好的做法，所以除了帮助我解决这个问题之外，我非常愿意听取更好的方法来获取有关获取gravatar的逻辑的建议，而不必ping gravatar没有必要。

Answer 1

您想在尝试在第二个脚本中设置源时删除引号

document.getElementById('avatar').src = 'myAvatar';

应该是

document.getElementById('avatar').src = myAvatar;

否则，您只是将源设置为字符串'myAvatar'，而不是实际查找myAvatar的值。

就像注释一样，您可以将第一个脚本标记中的所有代码移动到第二个脚本标记，这样可以使其更清晰，并且可以提供更好的加载顺序。

另外，如果你只是使用php代码格式化一个字符串（即不从数据库中提取它），那么你可以找出它将它转换为什么并硬编码。另一方面，如果你计划从数据库或非静态变量中取出它，这样就好了，在我看来，以这种方式包含php并不是一种不好的做法。

Answer 2

请参阅此简短文档： http://en.gravatar.com/site/implement/images/php/

阅读来源

中的评论

<?php
function &get_gravatar( $email, $s = 80, $d = 'mm', $r = 'g', $img = false, $atts = array() ) {
    $url = 'http://www.gravatar.com/avatar/';
    $url .= md5( strtolower( trim( $email ) ) );
    $url .= "?s=$s&d=$d&r=$r";

    //* Change this to what you need if there's an image add else if needed */
    if ( $img ) {
        $url = '<img src="' . $url . '"';
        foreach ( $atts as $key => $val )
            $url .= ' ' . $key . '="' . $val . '"';
        $url .= ' />';
        return $url;
    } else { 
        /** no image */
        return "http://www.gravatar.com/avatar/00000000000000000000000000000000?s=100&d=mm&r=g";
    }
}
//** make this happen */
$myAvatar =& get_gravatar(/** needs options read linked doc**/);
?>

您也可以阅读http://php.net/manual/en/functions.returning-values.php

中的示例3

然后

<script type="text/javascript">
    var myAvatar = "<?php echo $myAvatar; ?>";
</script>

localStorage显示存储的图像或默认图像

2 个答案: