前端的第二十三天（本地存储以及下一阶段的学习）
一、window.sessionStorage
<body>
<input type="text" class="ipt">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="clear">清空数据</button>
<script>
var ipt = document.querySelector('.ipt');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var clear = document.querySelector('.clear');
set.addEventListener('click',function(){
var val = ipt.value;
sessionStorage.setItem('uname',val);
})
get.addEventListener('click',function(){
alert('账户名称是： ' + sessionStorage.getItem('uname'));
})
remove.addEventListener('click',function(){
sessionStorage.removeItem('uname');
})
//慎用！！！
clear.addEventListener('click',function(){
sessionStorage.clear();
})
</script>
二、window.localStorage
<script>
var ipt = document.querySelector('.ipt');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var clear = document.querySelector('.clear');
set.addEventListener('click',function(){
var val = ipt.value;
localStorage.setItem('uname',val);
})
get.addEventListener('click',function(){
alert(localStorage.getItem('uname'));
})
remove.addEventListener('click',function(){
localStorage.removeItem('uname');
})
clear.addEventListener('click',function(){
localStorage.clear('uname');
})
</script>
<style>
#check {
position:absolute;
top: 12px;
}
</style>
</head>
<body>
<input id="text" type="text">
<input id="check" type="checkbox"> 记住用户名
<script>
var text = document.querySelector('#text');
var check = document.querySelector('#check');
if(localStorage.getItem('username')){
text.value = localStorage.getItem('username');
check.checked = true;
}
check.addEventListener('change',function(){
if(this.checked){
var val = text.value;
localStorage.setItem('username',val);
}else{
localStorage.removeItem('username');
}
})
</script>
学海无涯，砥砺前行
jQuery再见！！
2021/12/2日留