HTML5 Web 存储

HTML5 Web 存储用于在用户的浏览器上存储数据。

什么是 Web 存储

HTML5 的网络存储功能允许你在用户的计算机上本地存储一些信息，类似于 cookie，但它比 cookie 更快，更好。但是，Web 存储不比 cookie 更安全。请查看有关 PHP cookie 的教程以了解有关 cookie 的更多信息。

存储在 Web 存储中的信息不会发送到 Web 服务器，而不是每次请求都将数据发送到服务器的 cookie。此外，在 cookie 允许你存储少量数据（近 4KB）的情况下，Web 存储允许你存储最多 5MB 的数据。

有两种类型的 Web 存储，它们的范围和生命周期不同：

• 本地存储 - 本地存储使用 localStorage 对象永久存储整个网站的数据。这意味着存储的本地数据将在第二天，下一周或下一年提供，除非你将其删除。
• 会话存储 - 会话存储使用 sessionStorage 对象临时存储数据，用于单个窗口（或选项卡）。当会话结束时，即当用户关闭该窗口（或标签）时，数据消失。

提示： 所有主流现代浏览器（如 Firefox，Chrome，Opera，Safari 和 Internet Explorer 8+）均支持 HTML5 的网络存储功能。

localStorage 对象

如前所述，localStorage 对象存储没有过期日期的数据。每条数据都存储在键/值对中。键标识信息的名称（如’first_name’），值是与该键相关的值（比如’Peter’）。

<script type="text/javascript">
// Check if the localStorage object exists
if(localStorage){
    // Store data
    localStorage.setItem("first_name", "Peter");
 
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name"));
} else{
    alert("Sorry, your browser do not support local storage.");
}
</script>

示例说明：

上述 JavaScript 代码具有以下含义：

• localStorage.setItem(key, value): 存储与键关联的值。
• localStorage.getItem(key)：检索与键关联的值。

你还可以通过将键值传递给 removeItem() 方法来从存储中删除特定项目，例如 localStorage.removeItem(key) 。

但是，如果要删除完整的存储空间，请使用 clear() 方法 localStorage.clear() 。 clear() 方法立即清除 localStorage 中的所有键/值对，因此在使用它之前请仔细考虑。

注意： 不同浏览器之间的 Web 存储数据（本地和会话）将不可用，例如，Firefox 浏览器中存储的数据在 Google Chrome，Internet Explorer 或其他浏览器中不可用。

sessionStorage 对象

sessionStorage 对象的工作方式 localStorage 与之相同，只是它仅为一个会话存储数据，即数据保持不变直到用户关闭该窗口或选项卡。

<script type="text/javascript">
// Check if the sessionStorage object exists
if(sessionStorage){
    // Store data
    sessionStorage.setItem("last_name", "Parker");
 
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else{
    alert("Sorry, your browser do not support session storage.");
}
</script>