HTML5本地存储（localStorage和sessionStorage）
HTML5提供了两种在客户端存储数据的机制：localStorage和sessionStorage。
- localStorage: 用于长久保存整个网页的数据，保存的数据没有时间限制。它是针对一个域名的，同源策略。
- sessionStorage: 用于临时保存同一窗口(window)或标签页的数据，在关闭窗口或标签页之后数据会被清除。
以下是使用localStorage和sessionStorage的示例代码：
<!DOCTYPE html>
<html>
<body>
<h2>LocalStorage 示例</h2>
<p>在输入框中输入文本，然后刷新页面，文本会保持不变。</p>
<input type="text" id="myText" onchange="save()">
<button onclick="load()">载入文本</button>
<script>
function save() {
var text = document.getElementById('myText').value;
localStorage.setItem('myKey', text);
}
function load() {
var text = localStorage.getItem('myKey');
if (text) {
document.getElementById('myText').value = text;
}
}
</script>
<h2>SessionStorage 示例</h2>
<p>在输入框中输入文本，关闭标签页后文本会消失。</p>
<input type="text" id="sessionText" onchange="saveSession()">
<button onclick="loadSession()">载入文本</button>
<script>
function saveSession() {
var text = document.getElementById('sessionText').value;
sessionStorage.setItem('sessionKey', text);
}
function loadSession() {
var text = sessionStorage.getItem('sessionKey');
if (text) {
document.getElementById('sessionText').value = text;
}
}
</script>
</body>
</html>在这个例子中，save()和load()函数用于操作localStorage，而saveSession()和loadSession()函数用于操作sessionStorage。这些操作主要通过setItem和getItem方法实现。
评论已关闭