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

• Cookies包含在每个HTTP请求中，从而通过传输相同的数据来减慢Web应用程序的速度。

• Cookie包含在每个HTTP请求中，从而通过Internet发送未加密的数据。

• Cookies被限制为大约4 KB的数据。不足以存储所需数据。

这两个存储分别是会话存储和本地存储，它们将用于处理不同的情况。

几乎每个浏览器的最新版本都支持HTML5存储，包括Internet Explorer。

会话存储

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

例

例如，如果用户在两个不同的窗口中使用同一站点购买机票。如果该站点使用cookie来跟踪用户正在购买哪个票证，那么当用户在两个窗口中逐页单击时，当前正在购买的票证将从一个窗口“泄漏”到另一个窗口，从而可能导致用户在没有真正注意到的情况下为同一航班购买两张票。

HTML5引入了sessionStorage属性，站点将使用该属性将数据添加到会话存储中，并且在该窗口中打开的同一站点中的任何页面（即会话）都可以访问该页面，并且在您关闭窗口后，会议将丢失。

以下是设置会话变量并访问该变量的代码-

    
      
Refresh the page to increase number of hits.
      
Close the window and open it again and check the result.

   

这将产生以下结果-

本地存储

本地存储用于跨多个窗口的存储，并且持续时间超出当前会话。特别是，出于性能方面的考虑，Web应用程序可能希望在客户端存储兆字节的用户数据，例如整个用户创作的文档或用户的邮箱。

同样，cookie不能很好地处理这种情况，因为它们随每个请求一起发送。

例

HTML5引入了localStorage属性，该属性将用于访问页面的本地存储区域而没有时间限制，并且只要您使用该页面，该本地存储都将可用。

以下是设置本地存储变量并在每次访问此页面时（甚至是下次打开窗口时）都访问该变量的代码-

        
      
Refresh the page to increase number of hits.
      
Close the window and open it again and check the result.

   

这将产生以下结果-

删除网络存储

在本地计算机上存储敏感数据可能很危险，并且可能会留下安全漏洞。

会话终止后，浏览器会立即删除会话存储数据。

要清除本地存储设置，您需要调用localStorage.remove（’key’） ;其中“键”是您要删除的值的键。如果要清除所有设置，则需要调用localStorage.clear（）方法。

以下是清除完整本地存储的代码-

        
      
Refreshing the page would not to increase hit counter.
      
Close the window and open it again and check the result.

   

这将产生以下结果-