把图片存储 canvas原生API转成base64

1.LocalStorage有什么用？

2.LocalStorage的普通用法以及如何存储图片。

 

    首先介绍下什么是LocalStorage

它是HTML5的一种最新储存技术。但它只能储存字符串。以前的这部分工作一直是由cookie来完成。但是，cookie只能存储5k左右的数据。而localstorage可以存储5M！！ 这无论是PC端还是移动端，都非常的令人激动！

既然有这样轻微的了解之后。我们大概就能明白它的用途了。

 

这两天我刚好做了个移动端的项目，页面没什么内容，却有两张大大的图片。（把页面直逼200多KB）为了提升页面的加载效果，我非常渴望的试用了下localstorage来缓存图片。

但是由于localstorage只能存储字符串，那用什么办法能让它存储一张图片呢？

 

这时我们能想到图片的格式是能转换的，我们能使用canvas来做到这点。接着，我们看代码。

我们写了这样的一个函数，我们只需要自己定义 初始img所需的src 把src的路径字符串 作为第二个参数传入函数。

这样我们就能set每一个localstorage的key。

 

然后如果我们要取出这个图片的话。那我们就直接用localstorage.getItem(‘key’)的API  把取出来的base64的一堆字符。赋予到src上，或者是background的url里。这样下次打开页面就是直接取出该图片了。是不是很酷？！

 

我们可以看看这个的效果。这也解决了我以前F12看别人网站的疑惑。