HTML5 Web存储

来源：互联网发布：简洁工单任务系统源码编辑：程序博客网时间：2024/05/22 14:28

出处《 HTML5中文教程》 page 69

HTML5引入了两种机制，类似于HTTP 的会话cookie，用于在客户端存储结构化数据以及克服以下缺点。

每个HTTP请求中都包含Cookies,从而导致传输相同的数据减缓我们的Web应用程序。
每个HTTP请求中都包含Cookies,从而导致发送未加密的数据到互联网上
Cookies只能存储有限的4KB数据，不足以存储所有的数据。

这两种存储方式是session storage和local storage，他们将用于处理不同的情况。

几乎所有最新版的浏览器都支持HTML5存储，包括IE浏览器。

1）会话存储 Session Storage

会话存储被设计用于用户执行单一事务的场景，但是同时可以在不同的窗口中执行多个事务。

示例：

比如，如果用户在同一个网站的不同窗口中购买机票。如果该网站使用cookie跟踪用户购买的机票，当用户在窗口中点击页面时，从一个窗口到另一个窗口时已经购买的机票会"泄漏“，这可能导致用户购买同一个航班的两张机票而没有注意到。

HTML5引进了sessionStorage属性，这个网站可以用来把数据添加到会话存储中，用户仍然可以在打开的持有该会话的窗口中访问同一个站点的任意页面，当关闭窗口时，会话也会丢失。

下面的代码将会设置一个会话变量，然后访问该变量。

<!DOCTYPE HTML><html> <body>  <script type="text/javascript">    if( sessionStorage.hits ){  sessionStorage.hits = Number( sessionStorage.hits ) + 1;  }else{   sessionStorage.hits = 1;}document.write( "Total Hits:"+sessionStorage.hits );  </script>  <P>Refresh the page to increase number of hits.</P>  <P>Close the window and open it again and check the result.</P> </body></html>

2）本地存储 Local Storage

本地存储被设计用于跨多个窗口进行存储，并持续处在当前会话上。尤其是出于性能的原因Web应用程序可能希望在客户端存储百万字节的用户数据，比如用户撰写的整个文档或是用户的邮箱。

Cookies并不能很好的处理这种情况，因为每个请求都会传输。

HTML5 引入了localStorage属性，可以用于访问页面的本地存储区域而没有时间限制，无论何时我们使用这个页面的时候本地存储都是可用的。

下面的代码设置了一个本地存储变量，每次访问这个页面时都可以访问该变量，甚至是下次打开窗口时。

<!DOCTYPE HTML><html><body> <script type="text/javascript">   if( localStorage.hits ){    localStorage.hits = Number(localStorage.hits) + 1;   }else{     localStorage.hits = 1;   }   document.write("Total hits:" + localStorage.hits ); </script> <p>Refersh the page to increase number of hits</p> <p>Close the window and open it again and check the result</p></body></html>

0 0