4.1 localStorage 和 sessionStorage
网络存储让网页应用可以在用户的浏览器中保存数据。这个功能特别适合保存一些跨访问或页面导航时需要保存的信息。在 HTML5 中，引入了两种主要的网络存储：localStorage 和 sessionStorage。
什么是 localStorage?
localStorage 是一种在用户浏览器中无限期保存数据的存储方式。即使在关闭浏览器或重启电脑后，localStorage 中的数据依然可用。这对需要跨会话保存的信息很有用，比如用户设置或购物车中的数据。
什么是 sessionStorage?
sessionStorage 是一种在用户浏览器中保存数据的方式，仅在一个会话期间有效。sessionStorage 中的数据只能在标签页或浏览器窗口打开时访问。这对只在一个会话期间需要的数据很有用，比如临时的表单数据或应用状态。
主要方法和属性
localStorage 和 sessionStorage 的方法和属性
这两种类型的网络存储拥有相同的 API，包括用于处理数据的方法和属性：
setItem(key, value): 使用指定的键保存值。getItem(key): 返回保存的指定键的值。removeItem(key): 删除指定键的值。clear(): 清空存储中的所有数据。key(index): 根据索引返回键。length: 返回存储中的键值对的数量。
4.2 使用示例
localStorage 的使用示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>localStorage 示例</title>
</head>
<body>
<h1>localStorage 示例</h1>
<input type="text" id="username" placeholder="输入您的用户名">
<button id="saveButton">保存</button>
<button id="loadButton">加载</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// 保存值到 localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('用户名已保存!');
});
// 从 localStorage 加载值
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('用户名已加载!\n' + `${savedUsername}`);
} else {
alert('未找到用户名。');
}
});
</script>
</body>
</html>
sessionStorage 的使用示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage 示例</title>
</head>
<body>
<h1>sessionStorage 示例</h1>
<input type="text" id="sessionData" placeholder="输入些数据">
<button id="saveSessionButton">保存</button>
<button id="loadSessionButton">加载</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// 保存值到 sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('数据已保存在会话中!');
});
// 从 sessionStorage 加载值
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('数据已从会话中加载!\n' + `${savedData}`);
} else {
alert('会话中未找到数据。');
}
});
</script>
</body>
</html>
4.3 localStorage 和 sessionStorage 的比较
localStorage 和 sessionStorage 的区别
- 存储时间：
- localStorage 的数据保存是无限期的，除非用户或脚本明确删除它们。
- sessionStorage 的数据仅在当前会话（浏览器标签页或窗口）期间有效。
- 作用域：
- localStorage 中的数据在同一域名下的所有标签页和窗口中都可访问。
- sessionStorage 中的数据仅在当前标签页或窗口中可访问。
- 存储大小：
- 通常 localStorage 和 sessionStorage 每个域名的限制在 5-10 MB，具体取决于浏览器。
localStorage 和 sessionStorage 使用的比较示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>比较示例</title>
</head>
<body>
<script>
// 使用 localStorage
localStorage.setItem('persistentData', '这些数据在会话间保留');
console.log(localStorage.getItem('persistentData')); // "These data persists across sessions"
// 使用 sessionStorage
sessionStorage.setItem('temporaryData', '这些数据仅在会话期间有效');
console.log(sessionStorage.getItem('temporaryData')); // "These data persists only during the session"
</script>
</body>
</html>
4.4 应用领域
何时使用 localStorage:
- 保存需要在会话间保留的数据，比如用户设置或偏好
- 保存需要在同一域名下的所有标签页和窗口中可访问的数据
- 保存较少更改的数据
何时使用 sessionStorage:
- 保存仅在当前会话期间需要的临时数据
- 保存当前标签页或窗口特定的数据
- 保存需要在关闭标签页或窗口时删除的数据
安全性和隐私性
使用网络存储时重要的是考虑安全性和隐私性问题：
- 加密: 默认情况下，网络存储中的数据不加密。如果需要保存机密信息，建议在保存前加密数据。
- 跨域攻击: 网络存储仅限于同一域名，这可以防止其他域名访问数据。但需防范 XSS（跨站脚本）攻击，以免恶意人士获取存储中的数据。
- 数据量限制: 尽量只保存必要的信息，并定期清除过时的数据，以避免存储溢出。
GO TO FULL VERSION