使用HTML5 LocalStorage进行字体/图像/常用插件

Question

1. 有没有人成功使用localStorage来存储CSS引用的字体文件？ 我该如何实现呢？

2. 对于图像，我知道我可以用脚本对图像进行二进制编码并保存到localStorage中，但这意味着一个非常大的脚本代码。 如果每次都加载臃肿的脚本，我看不出任何真正的好处。 如果脚本缓存为单独的文件，则它与首先缓存图像文件相同。 我是否遗漏了某些东西，或者实际上没有任何好处是本地图像的正常情况。

3. 有人成功地从Facebook / Google / Twitter实施了localStoraging流行插件，并愿意分享哪些是最有用/适用于缓存的？

Answer 1

我不知道您的浏览器支持要求是什么样的。

1. localStorage适用于IE8 +。
2. @ font-face有不同的支持，但IE9 +支持WOFF字体。
3. 我认为你需要对你的字体进行base64编码才能使用localStorage。
4. dataUri（base64'd字体所需）在IE8中有大小限制（我相信它是32k）。
5. 如果你问我，Cufon真的很糟糕。 在我的情况下，它是WOFF支持或没有。

本文讨论如何在本地存储中存储图像。 当然它的速度非常快： http ： //www.sencha.com/learn/taking-sencha-touch-apps-offline/

至于字体，我正在考虑自己这样做。 我会让你知道它是如何工作的:)

另外，请访问caniuse.com获取浏览器支持：

• http://caniuse.com/#search=localstorage
• http://caniuse.com/#search=datauri

Answer 2

希望这可以帮助：

1. 根据经验，我可以告诉你不要这样做。 您可以使用CSS3 @fontface，但这仍然会给您一些问题。 我发现最稳定的解决方案是使用cufon： http ：//cufon.shoqolate.com/generate/。

2. 我同意你的评估，并自己详细探讨过。 在大多数情况下，缓存图像击败编码图像。

3. 不，但只能想象这会让您在跨浏览器兼容性方面感到非常悲痛。

谢谢，

马特