H5新属性 cookie、localStorage和sessionStorage的区别

       web存储：让我们的浏览器像数据库一样，存储内容

一、cookie------存储账号密码

 1、说明：大小限制在5KB左右；可以设置cookie过期时间存储大小；有效期在有效期内数据可被访问，过了有效期数据消失；

 2、语法：document.cookie='usename=value;expires=GMTtime;path=/'；

     参数一：存储账号值；参数二：expries 过期时间；参数三：path 路径

   PS：用户名不能是中文，需要转码

 3、设置、获取cookie：

        //1.设置cookie
        //  document.cookie='usename=value;expires=GMTtime;path=/';
        var name='xiaom小明';
        var pwd=123;
        var num=1;//男  2  女

        //中文转码
        name=encodeURIComponent(name);
        //console.log(name);//%E5%B0%8F%E6%98%8E
        
        //时间
        var time=new Date().getTime()+24*60*60*1000;//设置过期时间  毫秒 
        // console.log(time);
        var newTime=new Date(time);//newTime 得到过期时间 中国标准时间
        // console.log(newTime);
        time=newTime.toUTCString();//格林尼治的时间 toUTCString()  
        //转化时间格式 

        // document.cookie='username='+name+';expires='+time+';path=/'; 
        // document.cookie='pwd='+pwd+';expires='+time+';path=/'; 
        // document.cookie='sex='+num+';expires='+time+';path=/'; 

        //2.获取  document.cookie
        console.log(document.cookie);
        //username=xiaom%E5%B0%8F%E6%98%8E; pwd=123

 4、封装cookie：

       方式一：

      function getCookies(key){
            //字符串变成数据  ;分割
            var arr=document.cookie.split(';');
            // console.log(arr);//["username=xiaom%E5%B0%8F%E6%98%8E", " pwd=123"]
            var str='';
            for(var i=0;i<arr.length;i++){
               str=arr[i].trim().split('=');//i=0->["username", "xiaom%E5%B0%8F%E6%98%8E"] i=1->["pwd", "123"]
            //    console.log(str);
            //    console.log(str[0]);
                if(key==str[0]){
                    // return str[1];//对应的值 返回出去了
                    //输出的时候 解码
                    return decodeURIComponent(str[1]);
                }

            }
        }
        getCookies('username');
        console.log(getCookies('username'));
        console.log(getCookies('pwd'));

       方式二：

   function getCookies2(key){
        var arrCookie=document.cookie+';';
        // console.log(arrCookie);
        //1.获取当前key 所在的字符串里面首次出现的位置
        var key_index=arrCookie.indexOf(key);//
        // console.log(key_index);
        //2.获取key的长度 
        var key_len=key.length;
        // console.log(key_len);
        //3.获取value 开始的下标
        var key_start=key_index+key_len+1;
        // console.log(key_start);
        //4.结束  value结束的下标   获取;所在 下标之后的第一个;出现的
        var key_end=arrCookie.indexOf(';',key_index);
        // console.log(key_end);
        //5.截取字符串
        return decodeURIComponent(arrCookie.slice(key_start,key_end));
    }

    getCookies2('pwd');
    console.log( getCookies2('username'));
    console.log( getCookies2('sex'));

二、localStorage

 1、说明：本地存储、永久存储；只要不删除就一直存在；不需要网络；大小为5m；

 2、语法：   ①设置：localStorage.setItem(key,value);
                    ②读取：localStorage.getItem(key);
                    ③删除：localStorage.removeItem(key);
                    ④清空：localStorage.clear();

       eg：

      //对象
        var obj={
            "name":"张三",
            "age":18,
            "pwd":123
        }

        localStorage.setItem('uname','小明');
        localStorage.setItem('upwd','666');
        //复杂类型 
        localStorage.setItem('info',JSON.stringify(obj));

        //2.获取
        console.log(localStorage.getItem('uname'));
        console.log(localStorage.getItem('info'));//字符串 ---对象需要转化

        //3.删除 
        localStorage.removeItem('uname');

  PS：存储是字符串格式，存储复杂类型需要转为字符串

      JSON.stringify()；-----转为字符串

      JSON.parse()；--------转为对象

三、sessionStorage

  1、说明：会话存储；大小为5m；不需要网络；浏览器打开期间有效，浏览器关闭自动清除；

  2、语法：  ①sessionStorage.setItem(key,value);
                    ②sessionStorage.getItem(key);
                    ③sessionStorage.removeItem(key);
                    ④sessionStorage.clear();

       eg：

        //1.设置
        sessionStorage.setItem('zhanghao','www.haha.com');
        sessionStorage.setItem('password','123456');
        //2.获取

        //3.删除
        sessionStorage.removeItem('zhanghao');
        //4.清空
        sessionStorage.clear();