前端中怎样设置cookie

这次给大家带来前端中怎样设置cookie，前端中设置cookie的注意事项有哪些，下面就是实战案例，一起来看一下。

cookie

是什么：是一种用来在客户端硬盘上存储信息的手段。

为什么用？：可以用来存储一些信息，实现一些特殊的效果。例如实现多少天内免登陆，或者存储一些小数据。

cookie中的一些字段含义：

1. key=value（键=值） 就是 cookie的一个键值对，一般是根据key拿到对应的value

2. expires（过期时间）设置该cookie的过期时间，也是用 ';' 来隔开，expires=GMT的时间字符串，例如要30天免登陆，就可以设置过期时间为今天开始的30天之后的日期。如果不设置过期时间，默认浏览器关闭该cookie就消失了。

3. path（路径） cookie并不是在哪里都能够获取到的。在网站中分为很多目录，可能很多目录中不需要使用到cookie，所以可以设置cookie的路径，这样更加安全，避免任意目录都能访问到该cookie。通过 path=/E:javascript/test 这样只能在该目录下才能获取到该cookie

4. domain（域）默认该cookie在该cookie所在域名下才能够访问到，但是有时候a.chaijinsong.com需要访问b.chaijinsong.com下的cookie，这时候就需要设置domain=chaijinsong.com。这样两个子域名都可以访问该cookie

5. secure（安全性） 默认secure是为false的，即通过http协议来传输，但是如果 secure=true 的话，就只能t通过https来进行传输

怎么用？：

document.cookie; //获取cookie
"aaa=aaa;bbb=bbb" //类似于这种格式，但是并不是字符串。
//设置cookie,也可以用来进行删除cookie，即将过期时间设置为过去的时间，最后一个参数可以传负数来实现
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
setCookie('cjs','cjs',30); //设置 name为cjs，value为cjs的一个cookie，并且时间为30天。
setCookie('cjs','cjs',-1); //让该cookie过期,然后在document.cookie中就没有cjs=cjs这个cookie了。但是其他key=value还存在
//获取某个key的cookie
function getCookie(key){
    let arr1 = document.cookie.split(';');
    for(let i=0;i<arr1.length;i++){
        let arr2 = arr1[i].split('=');
        if(key.trim() === arr2[0].trim()){
            return (arr2[1]);
        }
    }
    return "";
}
getCookie('cjs'); //因为上面已经将cjs这个cookie干掉了，所以这里得到为 ""

注意：在google浏览器上本地html文件打开直接给cookie赋值是不允许的，但是firefox可以。所以想要测试的话先在本地开服务器，让后使用本地ip访问该文件。进行cookie的操作。

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

使用CSS实现乒乓球对打动画

使用CSS实现乒乓球对打动画

以上就是前端中怎样设置cookie的详细内容，更多请关注其它相关文章！