HTML5&CSS3-充实笔记0501

HappyAndy_Lo

552

收藏 2019-05-01

五一快乐！

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