回顾js中的cookie/localstorage

Posted 2022-05-26 wangwenxin123

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