一、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()