本地存储实战-优快云博客

实现本地存储的步骤
1.获取文本框内的值
2.存储数据，利用 window.sessionStorage.setItem（）方法
3.设置数据
4.获取数据
5.删除数据
实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="username"  /><br />
		<button id="setData">设置数据</button>
		<button id="getData">获取数据</button>
		<button id="delData">删除数据</button>
		<script type="text/javascript">
//			window.sessionStorage.setItem('name','张三');
//			var username=document.querySelector('#username');
//			document.querySelector('#setData').onclick=function(){
				// 点击之后得到文本框中的值
//				var val=username.value;
				// 存储数据
//				window.sessionStorage.setItem('name',val);
//			}
//			document.querySelector('#getData').onclick=function(){
//				alert(window.sessionStorage.getItem('name'));
//			}
//			document.querySelector('#delData').onclick=function(){
//				//删除本行数据
//				// window.sessionStorage.removeItem('name');
//				//删除所有数据
//				window.sessionStorage.clear();
//			}
			window.localStorage.setItem('name','张三');
			var username=document.querySelector('#username');
			document.querySelector('#setData').onclick=function(){
				var val=username.value;
				window.localStorage.setItem('name',val);
			}
			document.querySelector('#getData').onclick=function(){
				alert(window.localStorage.getItem('name'));
			}
			document.querySelector('#delData').onclick=function(){
				//删除本行数据
				// window.localStorage.removeItem('name');
				//删除所有数据
				window.localStorage.clear();
			}
		</script>
	</body>
</html>