image.png
sessionStorage 数据操作-增删改查
image.png
添加存储数据 setItem(" 键 ", 值) 可以设置多个
image.png
存储在浏览器里的application - sessionStorage 键值对方式
image.png
获取数据
image.png
image.png
删除
image.png
image.png
清空多个，页面中的所有数据都删掉，慎用！！！
image.png
image.png
image.png
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" />
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script type="text/javascript">
var ipt = document.querySelector('input');
var set = document.querySelector(".set");
//1.存储
set.addEventListener('click', function() {
//点击存储数据,把数据存起来
var val = ipt.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('pwd', val);
});
var get = document.querySelector(".get");
// 2.获取
get.addEventListener('click', function() {
//点击获取数据
var val = ipt.value;
console.log(sessionStorage.getItem('uname', val));
});
//3.删除
var remove = document.querySelector(".remove");
remove.addEventListener('click', function() {
//点击删除数据
sessionStorage.removeItem('uname');
});
//4.清除所有
var del = document.querySelector(".del");
del.addEventListener('click', function() {
//点击删除数据
sessionStorage.clear();
});
</script>
</body>
</html>
localStorage
image.png
生命周期不一样！
案例 -- 记录用户名 分析在代码里
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记录用户</title>
</head>
<body>
<input type="text" id="username">
<input type="checkbox" id="remember"> 记住用户名
<script type="text/javascript">
var username = document.querySelector("#username");
var remember= document.querySelector("#remember");
//首先判断,先从localstorage里边取数据,有没有username的数据
// 如果有复制给文本框,还要把复选框勾选上
if(localStorage.getItem('username')){
username.value = localStorage.getItem('username');
remember.checked = true;
}
//如果复选框不勾选,清除存储数据
//给复选框添加change事件
remember.addEventListener('change', function(){
//如果勾选,存储本地. 没有勾选清除存储!
if(this.checked){
localStorage.setItem('username', username.value);
}else{
localStorage.removeItem('username');
}
});
</script>
</body>
</html>
