<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="返回个数" onclick="getLen()" />
<input type="button" value="增加" onclick="add();" />
<input type="button" value="修改" onclick="update();" />
<input type="button" value="删除" onclick="del();" />
<input type="button" value="返回value" onclick="get();" />
<input type="button" value="返回key" onclick="getKey();" />
<input type="button" value="清空" onclick="delAll();" />
<script>
var i = localStorage.length; //计数变量
//返回web存储的键值对的个数
function getLen() {
alert(localStorage.length);
}
//设置键值对
function add() {
localStorage.setItem('username' + i,'jack' + i);
i ++;
alert('存储成功');
}
//修改键值对
function update() {
localStorage.setItem('username2','李四');
alert('修改成功');
}
//删除键值对
function del() {
localStorage.removeItem('username2');
alert('删除成功');
}
//返回键对应的值
function get() {
var result = localStorage.getItem('username3');
alert(result);
}
//通过下标,返回key
function getKey() {
var key = localStorage.key(3);
alert(key);
}
//删除所有数据
function delAll() {
localStorage.clear();
alert('数据被清空');
}
</script>
</body>
</html>