本地存储 localStorage 和 sessionStorage

localStorage 和 sessionStorage 都是 HTML5 提供的 Web 存储 API，用于在客户端存储数据。它们的区别在于存储数据的生命周期不同。

localStorage 存储的数据没有过期时间，除非用户手动清除或者使用代码清除。而 sessionStorage 存储的数据只在当前会话（session）有效，当用户关闭浏览器窗口后，数据就会被清除。

使用方式类似，都是通过 JavaScript 的 localStorage 和 sessionStorage 对象进行操作。例如，存储数据可以使用 setItem 方法，获取数据可以使用 getItem 方法。

示例代码：

// 存储数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
const value = localStorage.getItem('key');
console.log(value); // 输出：value

// 存储数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
const value = sessionStorage.getItem('key');
console.log(value); // 输出：value

相关问题

移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

移动端浏览器的隐私模式/无痕模式通常会阻止浏览器保存历史记录和缓存，但并不会阻止本地存储(localStorage/sessionStorage)的使用。因此，在隐私模式下，网站仍然可以使用本地存储来存储数据。

由于本地存储是基于域名的，因此在隐私模式下，浏览器会为每个域名创建一个新的本地存储，而不是使用已经存在的本地存储。这意味着，如果用户在隐私模式下打开相同的网站两次，它们将拥有不同的本地存储，这可能导致数据丢失或其他问题。

此外，由于隐私模式下的本地存储是临时的，一旦用户关闭该网站，存储的数据就会被删除。因此，如果网站需要在用户下次访问时仍然保留数据，必须使用其他方法，如使用服务器端存储或使用cookie。

总之，虽然隐私模式下本地存储仍然可用，但需要注意数据存储的问题，并考虑使用其他方法来确保数据的持久性和安全性。

localStorage和SessionStorage区别

localStorage 和 sessionStorage 都是浏览器提供的两个本地存储机制，用于暂时保存用户数据，以便在网页会话期间保持。它们之间的关键区别在于数据的生命周期和可复用性：

1. **持久性**：
- localStorage：数据永久存储，即使关闭浏览器窗口或标签页，甚至清理缓存，数据都不会丢失，直到用户删除或清除浏览器数据。
- sessionStorage：数据只保留当前会话期间，即打开的浏览器窗口或标签页有效。关闭浏览器或标签页后，sessionStorage 中的数据会被清除。

2. **范围**：
- localStorage：数据属于整个域名下的所有页面，跨域限制较小。
- sessionStorage：每个窗口或标签页独立拥有数据，数据仅限于该特定页面，这意味着同源内的各个页面之间可以共享 sessionStorage 数据。

3. **数据大小**：
- 容量：两者理论上都有限制（通常是5MB），实际可用空间取决于浏览器和用户的设置。
- localStorage：如果出于安全考虑，应避免存储敏感信息，因为即便用户清除了浏览数据，localStorage 中的内容也可能未被彻底删除。
- sessionStorage：由于其会话级别的特性，对于敏感信息更为合适，因为关闭窗口就完全清空了数据。