发帖
雷达卡
Web Storage实例练习
<!DOCTYPE html>
<html>
<head>
<title>ch05_03</title>
<link rel="stylesheet" type="text/css" href="color.css">
<script type="text/javascript" >
function onLoad(){
inputSpan.style.display='none'; /*隐藏输入框和“提交”按钮 */
if(typeof(Storage) == "undefined"){
alert("Sorry!你的浏览器不支持Web Storage！");
}
else{
/*判断姓名是否已存入localStorage，已存入时才执行*/
if(localStorage.username){
/*不存在localStorage.counter数据时，返回undefined */
if(!localStorage.counter){
localStorage.counter = 1;
}
else{
localStorage.counter++ ;
}
btn_login.style.display = 'none'; /*隐藏登陆按钮*/
show_LocalStorage.innerHTML = localStorage.username + " 你好，这是你第 " + localStorage.counter + " 次来到网站~！";
}
btn_login.addEventListener("click", login);
btn_send.addEventListener("click",sendok);
btn_logout.addEventListener("click",clearLocalStorage);
}
}
function sendok(){
localStorage.username = inputname.value;
location.reload(); /*重载网页*/
}
function login(){
inputSpan.style.display = ''; /*显示姓名输入框和“提交”按钮*/
}
function clearLocalStorage(){
localStorage.clear();
show_LocalStorage.innerHTML = "已注销成功！";
btn_login.style.display=''; /*显示登陆按钮*/
inputSpan.style.display=''; /*显示姓名输入框和“提交”按钮*/
}
</script>
</head>
<body>
<button id="btn_login">登录</button>
<button id="btn_logout">注销</button>
<img src="images/welcome.jpg" /> <br />
<span id="inputSpan">请输入你的姓名：<input type="text" id="inputname" value=""><button id="btn_send">提交</button></span><br />
<div id="show_LocalStorage"></div><br />
</body>
</html>
代码说明
隐藏<div>和<span>组件
inputSpan.style.display='none'; 显示则赋值为''（空字符）就会显示
location.reload(true); //重载网页
计数器localStorage.counter 加1
JavaScript的算术运算符： + - * / %（求余）、++、--
逻辑运算符： && （逻辑与）、||逻辑或、！逻辑非
"abc" + 456 的结果是 “abc456”
“123”+ 456 的结果也是"123456"
用 Number(localStorage.counter) ++ 可以避免出现数字字符相连的错误。
getItem() 取值，如果数据不存在，就返回null，用属性和数组索引方式访问，会返回undefined
京公网安备 11010802022788号
