码迷,mamicode.com
首页 > Web开发 > 详细

回顾js中的cookie/localstorage

时间:2019-07-29 23:07:11      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:根据   ref   ons   取值   字符串   onload   location   gif   方式   

1.首先简单总结下cookie
cookie:可以做会话跟踪
  特点:
     1、大小限制(不能超过4k)
     2、每个域下cookie不能超过50个
     3、有效期(和设定时间有关),过了有效期cookie会自动删除
     4、cookie读取(只能访问同一个域名下的cookie)(域的限制)
     5、没有设置存储时间的cookie是临时cookie,浏览器关闭自动删除
     6、cookie值只能是字符串
     7、cookie访问:子能访问父的cookie   但是父不能访问子的cookie;
 
1.1   cookie的存储
实例讲解: 
   基于cookie存储的注册功能:
    存储cookie:
reg.onclick = function(){
         //将用户名和密码以对象的形式存储
         var json = {
             "username" : uname.value,
             "password" : upwd.value
         }
         //开始存储cookie
         document.cookie =  "userinfo="+JSON.stringify(json) ;
         //跳转到登录页面
         location.href = "../b/login.html";
    }
 
    获取cookie:
//页面加载后 获取cookie数据
    window.onload = function(){
         //取出cookie数据
         var str =  document.cookie;//userinfo={"username":"admin","password":"111"}
         var _json =  JSON.parse(str.split("=")[1]);//‘{"username":"admin","password":"111"}‘
         log.onclick = function(){
             //如果用户输入的用户名和密码与cookie中的用户名和密码相等  提示登录成功
             if( uname.value == _json.username &&  upwd.value==_json.password ){
                 alert("登录成功");
             }else{
                 alert("用户名或密码错误");
             }
         }
    }
 
娥姐经典案例: 
    cookie用法之简易购物车 
存储数据:
var oUl = document.querySelector("ul");
    var _json = {};//存一个对象数据
    var arr = [];//存好多个对象
    var pid = 1;//商品编号
    //使用委托为每一个 加入购物车按钮 添加单击事件
    oUl.addEventListener("click",(e)=>{
         var e = e || event;
         var target = e.target || e.srcElement;
         if( target.className === "addMe" ){
             //将当前点击的商品数据存入到一个对象中
             _json = {
                 "pid" : pid++,
                 "pname" :  target.parentNode.parentNode.children[0].innerHTML,
                 "price" :  target.parentNode.parentNode.children[1].innerHTML
             }
             
             //将对象存入到数组中
             arr.push( _json );
             //将数组存入到cookie中
             document.cookie = "prolist=" +  JSON.stringify(arr);
         }
    })
取出:
window.onload = function(){
         //页面加载取出数据
         var str = document.cookie;
         //拆分字符串得到商品数据 数组
         var arr = JSON.parse(str.split("=")[1]);
         var sum = 0;//累加金额
         var str = "";
         //遍历数组中的数据 将数据显示到页面上
         for( var i = 0 ; i < arr.length ; i++ ){
             var pro = arr[i];
             sum += Number(pro.price);
             str +=  `<li><span>${pro.pid}</span><span>${pro.pname}</span><span>${pro.price}</span></li>`;
         }
         demo.innerHTML += str;
         
         //点击按钮  显示金额
         btn.onclick = function(){
             t.value = sum;
         }
    }
2.localstorage   本地存储
基本用法: 存取改删
//存数据(增加数据)
      btnSave.onclick = function(){
            //定义一个localStorage
            var storage = window.localStorage;
            //向storage中存储数据
            //方式一:
            storage.sname = "jack";
            //方式二:
            storage["age"] = 18;
            //方式三:
            storage.setItem( "tel" , "132xxx" );
      }
      //取数据
      btnGet.onclick = function(){
            //定义一个localStorage
            var storage = window.localStorage;
            //取出localStorage中的数据  根据键取值
            console.log( storage.sname , storage["age"] ,  storage.getItem("tel") );
      }
      
      //改数据
      btnUpt.onclick = function(){
            //定义一个localStorage
            var storage = window.localStorage;
            //向storage中存储数据
            //方式一:
            storage.sname = "lily";
            //方式二:
            storage["age"] = 18;
            //方式三:
            storage.setItem( "tel" , "156xxx" );
      }
      //删数据  :根据键删除
      btnDel.onclick = function(){
            //定义一个localStorage
            var storage = window.localStorage;
            //根据键删除某个数据
            //storage.removeItem("tel");
            //清空
            storage.clear();
      }

回顾js中的cookie/localstorage

标签:根据   ref   ons   取值   字符串   onload   location   gif   方式   

原文地址:https://www.cnblogs.com/wangwenxin123/p/11267027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!