JavaScript本地存储

sessionStorage 同一个窗口本地存储信息

先设置数据

sessionStorage.setItem('username','张三');

sessionStorage.setItem('age',20);

得到数据

console.log(sessionStorage.getItem('username'));

删除数据

sessionStorage.removeItem('username');

console.log(sessionStorage.getItem('username'));

console.log(sessionStorage.getItem('username'),sessionStorage.getItem('age'));

清空数据 清除所有数据

sessionStorage.clear();

console.log(sessionStorage.getItem('username'),sessionStorage.getItem('age'));

 本地存储数据  多个窗口可以共享存储的数据

localStorage

设置数据

localStorage.setItem('username','李四')

localStorage.setItem('age',22);

console.log(localStorage.getItem('username'));

移除单个数据

localStorage.removeItem('username');

清除所有数据

localStorage.clear();

<script type="text/javascript">
			localStorage.setItem('username','王武');
			
			localStorage.setItem('age',30);
			console.log(localStorage.getItem('username'));
</script>

sessionStorage只能再同一个页面存储

console.log(sessionStorage.getItem('username'));//null
								
console.log(localStorage.getItem('username'),localStorage.getItem('age'));

用户名存储案例

<input type="text" name="username" id="username" value="" placeholder="请输入用户名"/>
<input type="checkbox" id="rusername"> 记住用户名

<script type="text/javascript">
			var username = document.querySelector('#username');
			var rusername = document.querySelector('#rusername');
			
			// 先判断用户是否需要记录数据 再 让记录的数据显示再表单里面 
			if(localStorage.getItem('username')){
				username.value=localStorage.getItem('username');
				rusername.checked = true;
			}
			// change改变时 发生  Checkbox选中和不选中时 发生
			rusername.addEventListener('change',function(){
				// console.log('改变了');
				// console.log(rusername.checked);
				if(this.checked){
					localStorage.setItem('username',username.value);
				}else{
					localStorage.removeItem('username');
				}
				
			})
</script>