HTML - Web 存储

Web 存储

HTML Web 存储 是一种用于在客户端存储结构化数据的机制，无需将其发送到服务器。这两种存储机制是 会话存储 和 本地存储。两者都统称为 HTML5 Web 存储 API 的一部分。

Web 存储的必要性

HTML Web 存储 的引入是为了克服 Cookie 的以下缺点

Cookie 包含在每个 HTTP 请求中，从而通过传输相同的数据来减慢 Web 应用程序的速度。
Cookie 包含在每个 HTTP 请求中，从而通过互联网发送未加密的数据。
Cookie 的数据限制约为 4 KB。不足以存储所需数据。

Web 存储的类型

HTML 提供两种类型的 Web 存储

会话存储
本地存储

要在 Web 应用程序中使用这两种 Web 存储（会话存储 或 本地存储），您可以分别通过 window.sessionStorage 和 window.localStorage 属性访问它们。

会话存储

会话存储 是临时的，并在页面会话结束时清除，会话结束发生在浏览器选项卡或窗口关闭时。存储在会话存储中的数据特定于每个选项卡或窗口。

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>

本地存储

本地存储 旨在用于跨多个窗口存储并在当前会话之外持续存在的存储。它不会过期，并且会保留在浏览器中，直到用户或 Web 应用程序手动将其删除。特别是，Web 应用程序可能希望出于性能原因在客户端存储兆字节的用户数据，例如整个用户编写的文档或用户的邮箱。

同样，Cookie 在处理这种情况时效果不佳，因为它们会随每个请求一起传输。

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>Refresh the page to increase number of hits.</p>
   <p>Close the window and open it again and check the result.</p>
</body>
</html>

删除 Web 存储

在本地计算机上存储敏感数据可能很危险，并且可能会留下安全漏洞。会话存储数据将在会话终止后立即由浏览器删除。

但是，要清除本地存储设置，我们需要调用 localStorage.remove('key')，其中 'key' 是我们要删除的值的键。如果要清除所有设置，则可以调用 localStorage.clear() 方法。

示例

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

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

打印页面