HTML5 初探~客户端缓存技术

在正文之前，先说下为什么要写，主要发现自己的表达能力还是不够火候，所以今年打算多写写文章，以拟补自己这方面的欠缺。

什么是HTML5?

HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。

本文主要介绍下HTML5的客户端缓存技术。

 Cookie

它是一个在来回在服务器和客户端传送文本的内置机制。服务器可以基于其放在cookie中的数据在不同web页面间追踪用户的信息。用户每次访问某个域时，

cookie数据都会被来回传送。

例如：cookie可以存储会话标示符，使得web服务器能够通过cookie中存储的同服务器端购物车数据库对应的唯一ID，来识别哪个购物车属于当前用户。这样，用户在页面间切换时，购物车可以同步更新，保持一致。cookie的另一用途是将本地个性化数据存储在应用程序中，以便后续网页加载时使用。

HTML5提供了两种客户端缓存技术：

• localStorage:没有时间限制
• sessionStorage:针对一个session会话的数据存储

之前这些操作主要是由cookie来完成的，但是由于cookie本身的大小限制以及服务器间带宽限制，这使得用cookie来存储数据效率低下并且传输速度也不高。

HTML5 使用 Web Storage API 来存储和访问数据,这一简单的API，开发者可以将数据存储在JavaScript对象中，对象在页面加载时保存，并且容易获取。通过使用localStorage或者sessionStorage，在新打开窗口或者新标签页以及重新启动浏览器时，开发人员都可以选择是否激活这些数据。并且存储的数据不会再网络中传输.此外，使用 Web Storage API 可以保存数兆字节的大数据。

localStoragte用法

localStorage 存储的数据没有时间限制

如何创建和访问 localStorage：

<script type="text/javascript">
localStorage.name="Hello World";
document.write(localStorage.name);
</script>

sessionStorage 用法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。(当然有些特殊情况，某些浏览器会在重启后恢复会话，所以sessionStorage在某些时候可能会比你想象的要“长命”多。)

如何创建并访问一个 sessionStorage：

1 <script type="text/javascript">
2sessionStorage.name="Hello World";
3 document.write(sessionStorage.name);
4 </script>