在客户端

Question

我正在构建一个网站，我必须在页面上多次显示用户的个人资料图片，例如10到15次。个人资料图片大小为80Kb，并从网址（我的服务器上不存在）中提取。多次显示会增加浏览器请求，从而增加页面大小。是否有任何方法可以通过客户端的javascript显示图像，以便图像只下载一次并保存到某个变量以便多次显示。或者如果你知道更好的选择，我们将非常感激。非常感谢。

Answer 1

请参阅此链接

https://www.ibm.com/developerworks/community/blogs/bobleah/entry/html5_code_example_store_images_using_localstorage57?lang=en

注销时

可以清除存储空间

<script>
      var hero;

      if ( localStorage.getItem('heroImg')) {
        hero = localStorage.getItem('heroImg');
      }
      else {
        hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7    /.../    6p+3dIR//9k=';
        localStorage.setItem('heroImg',hero);
      }

      document.getElementById("hero-graphic").src='data:image/png;base64,' + hero;
    </script> 


    <img id="hero-graphic" alt="Blog Hero Image" src="" />

此处hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7 /.../ 6p+3dIR//9k=';您可以通过ajax获取您的个人资料图片链接