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=12

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

//对象
        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();

//1.设置
        sessionStorage.setItem('zhanghao','www.haha.com');
        sessionStorage.setItem('password','123456');
        //2.获取
 
        //3.删除
        sessionStorage.removeItem('zhanghao');
        //4.清空
        sessionStorage.clear();

发表评论

邮箱地址不会被公开。 必填项已用*标注