回顾js中的cookie/localstorage

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();

      }