一、window.sessionStorage
1. 生命周期：关闭浏览器窗口
2. 使用范围：同一个页面下都可以使用
3. 存储形式：键值对
4. 操作：
（1）存储数据：sessionStorage.setItem(key, value)
（2）获取数据：sessionStorage.getItem(key)
（3）删除数据：sessionStorage.removeItem(key)
（4）删除所有数据：sessionStorage.clear()
二、window.localStorage
1. 生命周期：forever，除非手动删除
2. 使用范围：同一浏览器下的多页面使用
3. 存储形式：键值对
4. 操作：
（1）存储数据：localStorage.setItem(key, value)
（2）获取数据：localStorage.getItem(key)
（3）删除数据：localStorage.removeItem(key)
（4）删除所有数据：localStorage.clear()
三、Demo
<body>
<input type="text" id="username"><input type="checkbox" name="" id="remember">记住用户名
<script>
var input = document.querySelector('input');
var remember = document.querySelector('#remember');
if(localStorage.getItem('username')) {
input.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
var uname = input.value;
if(this.checked) {
localStorage.setItem('username',uname);
}else {
localStorage.removeItem('username');
}
})
</script>
</body>四、其他
1. 数组对象转换为字符串格式：JSON.stringify()
2. 字符串转换为对象格式：JSON.parse()
2404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
