cookie、localStorage、sessionStorage的使用与区别
cookie、localStorage、sessionStorage的使用与区别
小星星_cjx 发表于8个月前
cookie、localStorage、sessionStorage的使用与区别
  • 发表于 8个月前
  • 阅读 31
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

一、cookie

    1、定义:

        Coookie,有时也用其复数形式,指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。存储在用户本地终端上的数据。

        Cookie最典型的应用是判定注册用户是否已经登录网站,存储用户的登录信息。

    2、结构:

        cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“ ; ”分隔。

    3、传统方式:设置、读取、删除cookie:

//设置cookie,多个用分号加空格(; )隔开:
//获取当前时间 
var date=new Date(); 
var expiresDays=10; 
//将date设置为10天以后的时间 
date.setTime(date.getTime()+expiresDays*24*3600*1000); 
//将userId和userName两个cookie设置为10天后过期 
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString(); 


//获取cookie:
//设置两个cookie 
document.cookie="userId=828"; 
document.cookie="userName=hulk"; 
//获取cookie字符串 
var strCookie=document.cookie; 
//将多cookie切割为多个名/值对 
var arrCookie=strCookie.split("; "); 
var userId; 
//遍历cookie数组,处理每个cookie对 
for(var i=0;i<arrCookie.length;i++){ 
var arr=arrCookie[i].split("="); 
//找到名称为userId的cookie,并返回它的值 
if("userId"==arr[0]){ 
userId=arr[1]; 
break; 
} 
} 
alert(userId); 


//清除cookie:将其过期时间设定为一个过去的时间
//获取当前时间 
var date=new Date(); 
//将date设置为过去的时间 
date.setTime(date.getTime()-10000); 
//将userId这个cookie删除 
document.cookie="userId=828; expires="+date.toGMTString(); 

    4、函数封装:设置、读取、删除cookie:

        使用传统的方法处理cookie比较麻烦,而且不能指定获取某个cookie对应的值,因此我们需要封装相应的函数。

            4.1、封装设置cookie的函数

function setCookie(name, value, seconds) { //设置cookie
        seconds = seconds || 0; //seconds有值就直接赋值,没有为0,这个根php不一样。
        var expires = "";
        if (seconds != 0 ) { //设置cookie生存时间
            var date = new Date();
            date.setTime(date.getTime()+(seconds*1000));
            expires = "; expires="+date.toGMTString();
        }
        document.cookie = name+"="+escape(value)+expires+"; path=/"; //转码并赋值
    }

            4.2、封装取得cookie得函数

function getCookie(name) {  //取得cookie
        var nameEQ = name + "=";
        var ca = document.cookie.split(';'); //把cookie分割成组
        for(var i=0;i < ca.length;i++) {
            var c = ca[i]; //取得字符串
            while (c.charAt(0)==' ') { //判断一下字符串有没有前导空格
                c = c.substring(1,c.length); //有的话,从第二位开始取
            }
            if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name
                return unescape(c.substring(nameEQ.length,c.length)); //解码并截取我们要值
            }
        }
        return false;
    }

            4.3、封装清除cookie的函数 

function clearCookie(name) {   //清除cookie
        setCookie(name, "", -1);
    }

            案例代码如下:

setCookie("a","haha",1800);  //设置cookie
var a = getCookie("a");   //获取指定的cookie值
clearCookie("a");   //清除指定的cookie

二、HTML5的localStorage和sessionStorage

    1、localStorage:

        定义:

            用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

        使用方法:

            首先在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性:

if(!window.localStorage){
  alert("浏览器不支持localstorage");
}else{
  //主逻辑业务
}

            (1)localStorage的增(三种方式):

!localStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage。

不管存储进去是什么类型,返回的都是string类型,localStorage只支持string类型的存储

var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",1);

            (2)localStorage的删(两种方式):          

var storage=window.localStorage;
//将localStorage的所有内容清除
storage.clear();
//将localStorage中的某个键值对删除
storage.removeItem("a");
  

            (3)localStorage的查(三种方式):

var storage=window.localStorage;
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取
var c=storage.getItem("c");
console.log(c);

            (4)localStorage的改,即重新赋值(三种方式):

var storage=window.localStorage;
//修改a字段
storage["a"]=2;
//修改b字段
storage.a=2;
//修改c字段
storage.setItem("c",2);

        注意事项:

            一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成字符串形式,这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成JSON字符串。  

var storage=window.localStorage;
var data = {
  name: 'Chenjx',
  sex: 'female',
  age: '22'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);

            读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法

//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

扩展:JSON.stringify()和JSON.parse()

    (1)JSON.stringify() 用于从一个对象解析出字符串,例如:

var data = { //定义一个对象
  a: 1,
  b: 2
}
console.log(typeof data); //输出:object
var datastr = JSON.stringify(data);
console.log(typeof datastr); //输出:string
console.log(datastr); //输出:{"a":1,"b":2}

    (2)JSON.parse() 用于从一个字符串中解析出json对象,例如

//定义一个字符串,!注意:单引号写在{}外,每个属性都必须双引号,否则会抛出异常
var str='{"a":1,"b":2}'; 
console.log(typeof str); //输出:string
var strobj = JSON.parse(str); 
console.log(typeof strobj); //输出:object
console.log(strobj); //输出:Object: a:1
//                                  b:2
//                                 _proto_:Object

 

    2、sessionStorage:

        定义:

            用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

        使用方法:

            和localStorage一样,请参考前面

var storage=window.sessionStorage;
//和localStorage一样

三、三者的区别

特性 cookie localStorage sessionStorage
数据的生命期

可设置失效时间,

默认为关闭浏览器失效

除非被清除,

否则永久保存

仅在当前会话下有效,关闭页面或浏览器后被清除
存放数据大小 4KB左右 一般为5MB 一般为5MB
与服务器端通信 每次都会携带在http头,如果保存过多数据会有性能问题 仅在客户端(浏览器)中保存不参与和服务器的通信 仅在客户端(浏览器)中保存不参与和服务器的通信
易用性 需要程序员自己封装,源生cookie接口不友好 源生接口可以接受,亦可再次封装来对Object和Array有更好支持 源生接口可以接受,亦可再次封装来对Object和Array有更好支持
共有 人打赏支持
粉丝 0
博文 15
码字总数 11970
×
小星星_cjx
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: