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

Question

我想用来localStorage存储 people 的 url 路径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>

我知道将 php 放在 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>