<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" value="" id="user" placeholder="请输入用户名"/>
<input type="button" name="" value="保存" id="savebtn" />
<input type="button" value="读取" id='getbtn'/>
<input type="button" value="删除" id="removebtn"/>
<input type="button" value="清除数据" id="clearbtn"/>
</form>
<script type="text/javascript">
//Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据
//Web Storage分为两种：
//sessionStorage 这个对象适合保存临时数据，因为如果浏览器一旦正常关闭这些数据也就被清除了
// localStorage 一直将数据保存在客户端本地，除⾮主动删除数据，否则数据是永远不会过期的
//不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法：
//1. 保存数据：setItem( key, value );
//2.读取数据：getItem( key );
//3.删除单个数据：removeItem( key );
//4.删除所有数据：clear( );
//5.得到某个索引的key：如sessionStorage.key( index );
//6.表示key 的个数，也即 key长度: 如 localStorage.length;
savebtn.onclick=function () {
//判断当前浏览器是否支持Storage
if (typeof(Storage)=='undefined'){
alert('当前浏览器不支持Storage');
return
}
//临时存储
// sessionStorage.setItem('userName',user.value)
//永久储存
localStorage.setItem('userName',user.value)
}
getbtn.onclick=function () {
// alert(sessionStorage.getItem('userName'))
alert(localStorage.getItem('userName'))
}
removebtn.onclick=function () {
localStorage.removeItem('userName')
}
clearbtn.onclick=function () {
localStorage.clear();
}
localStorage.setItem('clessName','h1610b')
localStorage.setItem('num','502')
localStorage.setItem('bc','superyu')
console.log(localStorage);
console.log(localStorage.length);
//获取指定下标的key值
for(i=0;i<localStorage.length;i++){
console.log(localStorage.key(i));
}
</script>
</body>
</html>
