Html 简明教程
HTML - Web Storage
HTML Web 存储是一种机制，可帮助 Web 应用程序将数据本地存储在用户的浏览器中。
Types of Web Storage
HTML 引入了两种机制，类似于 HTTP 会话 Cookie，用于在客户端存储结构化数据而不将其发送到服务器。
-
Session Storage
-
Local Storage
要在 Web 应用程序中使用会话存储或本地存储，我们可以分别通过 window.sessionStorage 和 window.localStorage 属性访问它们。
Session Storage
Session Storage 是临时的，当页面会话结束时它会被清除，浏览器标签页或窗口关闭时会发生这种情况。存储在会话存储中的数据特定于每个选项卡或窗口。
HTML5 引入了 sessionStorage 属性，该属性将被网站用于将数据添加到会话存储中，并且同一窗口中打开的任何页面都可以访问该数据，即 session ，并且当您关闭该窗口时，该会话会丢失。
Example
以下是将设置会话变量并访问该变量的代码。
<!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 应用程序可能希望出于性能原因在客户端存储兆字节的用户数据，例如用户创建的完整文档或用户的邮箱。
同样，Cookie 不能很好地处理这种情况，因为它们会随每个请求一起传输。
HTML5 引入了 localStorage 属性，可用于访问页面本地存储区域，并且无论何时使用该页面，都可以使用此本地存储，甚至在下次打开窗口时也是如此。
Example
以下是将设置本地存储变量并在每次访问该页面时访问该变量的代码，即使下次打开窗口时也是如此。
<!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
在本地计算机上存储敏感数据可能很危险，并且可能留下安全漏洞。会话存储数据将在会话终止后立即被浏览器删除。
但是，要清除本地存储设置，我们需要调用 localStorage.remove('key'); ，其中“键”是我们想要删除的值的键。如果我们要清除所有设置，则可以调用 localStorage.clear() 方法。
Example
以下是将清除完整本地存储的代码；
<!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>