| sessionStorage | localStorage | |
|---|---|---|
| 生命周期 | 关闭浏览器窗口 | 永久生效，除非手动删除否则关闭页面也会存在 |
| 数据共享 | 在同一个窗口(页面)下数据可以共享 | 可以多窗口(页面)共享(同一浏览器可以共享) |
| 存储形式 | 以键值对的形式存储使用 | 以键值对的形式存储使用 |
| 存储数据 | sessionStorage.setltem(key, value) | localStorage.setltem(key, value) |
| 获取数据 | sessionStorage.getltem(key) | localStorage.getltem(key) |
| 删除数据 | sessionStorage.removeltem(key) | localStorage.removeltem(key) |
| 删除所有数据 | sessionStorage.clear() | localStorage.clear() |
案例：通过设置复选框，实现选择下次打开页面是否自动填入用户名
<body>
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value)
} else {
localStorage.removeItem('username');
}
})
</script>
</body>
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
