HTML - Web Storage
Web Storage
HTML Web Storage 是一种用于在客户端存储结构化数据而不发送到服务器的机制。这两种存储机制分别是 session storage 和 local storage，它们统称为 HTML5 Web Storage API。
Web Storage 的需求
HTML Web Storage 的引入是为了克服 cookies 的以下缺点：
- Cookies 会随每个 HTTP 请求一起发送，从而通过传输相同数据来减慢 Web 应用程序的速度。
- Cookies 会随每个 HTTP 请求一起发送，从而以未加密形式在互联网上传输数据。
- Cookies 的数据限制约为 4 KB，不足以存储所需数据。
Web Storage 的类型
HTML 提供了两种类型的 Web Storage：
- Session storage
- Local storage
要在 Web 应用程序中使用这两种 Web Storage（session storage 或 local storage），可以通过 window.sessionStorage 和 window.localStorage 属性分别访问它们。
Session Storage
Session storage 是临时的，当页面会话结束时（即浏览器标签页或窗口关闭时）它会被清除。Session storage 中存储的数据特定于每个标签页或窗口。
HTML5 引入了 sessionStorage 属性，网站可以使用它将数据添加到 session storage 中，这些数据将可供同一窗口中打开的同一网站的任何页面访问，即 session，一旦关闭窗口，会话就会丢失。
示例
以下代码将设置一个 session 变量并访问该变量 −
<!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 应用程序可能希望在客户端存储数 MB 的用户数据，例如完整的用户编写的文档或用户的邮箱。
同样，cookies 无法很好地处理这种情况，因为它们会随每个请求一起传输。
HTML5 引入了 localStorage 属性，用于无时间限制地访问页面的 local storage 区域，只要使用该页面，此 local storage 就会可用。
示例
以下代码将设置一个 local storage 变量，并在每次访问该页面时（即使下次打开窗口时）访问该变量 −
<!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 Storage
在本地机器上存储敏感数据可能很危险，并可能留下安全漏洞。session storage data 会在会话终止后立即被浏览器删除。
然而，要清除 local storage 设置，我们需要调用 localStorage.remove('key'), 其中 'key' 是我们想要删除的值的键。如果要清除所有设置，可以调用 localStorage.clear() 方法。
示例
以下代码将清除完整的 local storage −
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
localStorage.clear();
// 重置访问次数。
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>