HTML5 Web 存储——localStorage/sessionStorage
localStorage
localStorage 允许我们在客户端存储数据，并在同一域名下的所有页面中共享这些数据。存储的数据将一直存在，即使用户关闭浏览器也是如此。下面是一个简单的例子：
<!DOCTYPE html> <html> <head> <title>LocalStorage Example</title> </head> <body> <h1>LocalStorage Example</h1> <input type="text" id="name" placeholder="Enter your name"> <button onclick="saveName()">Save Name</button> <script> function saveName() { var name = document.getElementById('name').value; localStorage.setItem('name', name); alert('Name saved successfully!'); } </script> </body> </html>
在这个例子中，我们使用 localStorage.setItem() 方法将用户输入的名称存储在本地存储中。可以在另一个页面或者刷新页面后使用 localStorage.getItem() 来检索存储的数据。
var name = localStorage.getItem('name');
sessionStorage
sessionStorage 与 localStorage 类似，但有一个主要区别：存储在 sessionStorage 中的数据仅在当前会话期间可用。当用户关闭浏览器标签页或浏览器窗口时，存储在 sessionStorage 中的数据将被删除。下面是一个简单的例子：
<!DOCTYPE html> <html> <head> <title>SessionStorage Example</title> </head> <body> <h1>SessionStorage Example</h1> <input type="text" id="name" placeholder="Enter your name"> <button onclick="saveName()">Save Name</button> <script> function saveName() { var name = document.getElementById('name').value; sessionStorage.setItem('name', name); alert('Name saved successfully!'); } </script> </body> </html>
在这个例子中，我们使用 sessionStorage.setItem() 方法将用户输入的名称存储在 sessionStorage 中。可以在同一会话期间的另一个页面或者刷新页面后使用 sessionStorage.getItem() 来检索存储的数据。
var name = sessionStorage.getItem('name');
总结
localStorage 和 sessionStorage 都允许我们在客户端（浏览器）中存储数据。localStorage 适用于需要持久保存数据的情况，而 sessionStorage 则适用于在同一会话期间共享数据的情况。
但是，我们应该注意到，与传统的 Cookie 相比，Web 存储具有更好的性能和安全性。它们还提供了更大的存储容量，因此我们可以使用 Web 存储来存储更多的数据
