Html5 简明教程

HTML - Web Storage

HTML Web 存储是一种机制，可帮助 Web 应用程序将数据本地存储在用户的浏览器中。

HTML Web Storage is a mechanism that helps web applications to stores data locally in users browsers.

Types of Web Storage

HTML 引入了两种机制，类似于 HTTP 会话 Cookie，用于在客户端存储结构化数据而不将其发送到服务器。

HTML introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side, without sending it to the server.

  1. Session Storage

  2. Local Storage

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

To use session storage or local storage in web application, we can access them through the window.sessionStorage and window.localStorage properties respectively.

Examples of HTML Web Storage

以下是一些示例，展示了 HTML 中 Web 存储的不同方式。

Here are some example that shows different ways of web storage in HTML.

Session Storage

Session Storage 是临时的，当页面会话结束时它会被清除，浏览器标签页或窗口关闭时会发生这种情况。存储在会话存储中的数据特定于每个选项卡或窗口。

The Session Storage is temporary and it gets cleared when the page session ends, which happens when the browser tab or window is closed. The data stored in session storage is specific to each tab or window.

HTML5 引入了 sessionStorage 属性，该属性将被网站用于将数据添加到会话存储中，并且同一窗口中打开的任何页面都可以访问该数据，即 session ，并且当您关闭该窗口时，该会话会丢失。

HTML5 introduces the sessionStorage attribute which would be used by the sites to add data to the session storage, and it will be accessible to any page from the same site opened in that window, i.e., session and as soon as you close the window, the session would be lost.

Example

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

Following is the code which would set a session variable and access that variable.

<!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>

Local Storage

Local Storage 旨在跨越多个窗口进行存储，并且持续时间超过当前会话。它不会过期，并且会一直保存在浏览器中，直到用户或 Web 应用程序手动删除它。特别是，Web 应用程序可能希望出于性能原因在客户端存储兆字节的用户数据，例如用户创建的完整文档或用户的邮箱。

The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session. It does not expire and remains in the browser until it is manually deleted by the user or by the web application. In particular, web applications may wish to store megabytes of user data, such as entire user-authored documents or a user’s mailbox, on the client side for performance reasons.

同样，Cookie 不能很好地处理这种情况，因为它们会随每个请求一起传输。

Again, cookies do not handle this case well, because they are transmitted with every request.

HTML5 引入了 localStorage 属性，可用于访问页面本地存储区域，并且无论何时使用该页面，都可以使用此本地存储，甚至在下次打开窗口时也是如此。

HTML5 introduces the localStorage attribute which would be used to access a page’s local storage area without no time limit and this local storage will be available whenever you would use that page.

Example

以下是将设置本地存储变量并在每次访问该页面时访问该变量的代码，即使下次打开窗口时也是如此。

Following is the code which would set a local storage variable and access that variable every time this page is accessed, even next time, when you open the window;

<!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>

Delete Web Storage

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

Storing sensitive data on local machine could be dangerous and could leave a security hole. The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.

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

However, to clear a local storage setting, we need to call localStorage.remove('key'); where 'key' is the key of the value we want to remove. If we want to clear all settings, the localStorage.clear() method can be called.

Example

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

Following is the code which would clear complete local storage;

<!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>

Reson to birng Web Storage over Cookies

代码存储通过以下手段克服了 Cookie 的缺点。

The web storage is introduced to overcome the following drawbacks of cookies.

  1. Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.

  2. Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.

  3. Cookies are limited to about 4 KB of data. Not enough to store required data.