localStorage отображает сохраненное изображение или изображение по умолчанию

Question

Я хочу использовать localStorage для хранения 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 без для пинга gravatar, если это не нужно.

Answer 1

Вы хотите удалить кавычки при попытке установить источник во втором сценарии

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

должен быть

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

В противном случае вы только настройки источника быть строка 'myAvatar', а не на самом деле найти то, что значение myAvatar есть.

Как примечание, вы можете переместить весь код в первом теге скрипта ко второму тегу скрипта, что сделает его более чистым и даст лучший порядок загрузки.

Кроме того, если вы просто используете PHP-код для форматирования строки (т. Е. Не вытаскивая ее из базы данных), то вы можете просто узнать, к чему она ее конвертирует, и вставить ее в hardcode. С другой стороны, если вы планируете вытащить его из базы данных или нестатической переменной, так хорошо, что, на мой взгляд, неплохо включить 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**/); 
?> 

Также вы можете прочитать пример 3 из http://php.net/manual/en/functions.returning-values.php

Тогда

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