使用 HTML5 LocalStorage 存储字体/图像/流行插件

Question

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

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

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

Answer 1

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

1. localStorage 适用于 IE8+。
2. @font-face 有不同的支持，但 IE9+ 支持 WOFF 字体。
3. 我认为您需要对字体进行 Base64 编码才能与 localStorage 一起使用。
4. dataUri（base64 字体所需）在 IE8 中具有大小限制（我相信它是 32k）。
5. 如果你问我的话，库丰真的很糟糕。就我而言，要么是 WOFF 支持，要么什么都没有。

本文讨论在本地存储中存储图像。当然，它的速度非常快：
http://www.sencha.com/learn/take-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. 不，但只能想象这会给你的跨浏览器兼容性带来很多麻烦。

谢谢，

马特