美文网首页
前端开发中 cookie使用的总结

前端开发中 cookie使用的总结

作者: 一只章鱼哥 | 来源:发表于2021-02-06 22:56 被阅读0次

cookie 是存储于用户的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。可以使用 JavaScript或者jQuery 来创建和读取cookie 的值。


使用JavaScript操作cookie

1.创建cookie 并且保存

// 函数中的参数分别为 cookie 的名称、值以及过期天数

function setCookie(c_name,value,expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
setCookie('name','zzyn',1); // cookie过期时间为1天。
// 如果要设置过期时间以秒为单位
function setCookie(c_name,value,expireseconds){
    var exdate=new Date();
    exdate.setTime(exdate.getTime()+expireseconds * 1000);
    document.cookie=c_name+ "=" +escape(value)+
    ((expireseconds==null) ? "" : ";expires="+exdate.toGMTString())
}
setCookie('name','zzyn',3600);  //cookie过期时间为一个小时

2.读取cookie

// 函数中的参数为 要获取的cookie键的名称。
function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1){
            c_start=c_start + c_name.length+1;
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1){
                c_end=document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start,c_end));
        }
    }
    return "";
}
var uname= getCookie('name');
console.log(uname);

3.判断cookie是否存在

// 函数中的参数为,要判断的cookie名称
function checkCookie(c_name){
    username=getCookie(c_name);
    if (username!=null && username!=""){
        // 如果cookie值存在,执行下面的操作。
        alert('Welcome again '+username+'!');
    }else{
        username=prompt('Please enter your name:',"");
        if (username==null && username==""){
            //如果cookie不存在,执行下面的操作。
            setCookie('username',username,365)
        } 
    }
}

相关文章

  • 前端开发中 cookie使用的总结

    cookie 是存储于用户的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。...

  • 前端常用工具类

    前端技术经验总结 工具说明 前端开发过程中,经常会使用到工具类,比如对cookie的操作,url参数的获取,通用网...

  • Session与Cookie(一)Cookie

    前言 开发中,我们为什么要使用Session与Cookie?在前端开发中,我们一般都是使用HTTP协议传输数据的,...

  • 关于cookie

    关于cookie cookie cookie的定义cookie是前端开发中的一个重要概念。cookie翻译为“甜饼...

  • vue axios 允许携带cookie 值

    在最近的项目开发中,使用 vue +axios ,前端需要向服务器发送cookie值。但是 axios发送请求默认...

  • cookie和session的区别

    在网站开发中,对于存储和记忆有cookie和session两种方式,对于前端开发工程师来说,使用session的情...

  • 前端废物的自救之路(3)使用Cookie完成Nuxt.js中Vu

    前端废物的自救之路(3)使用Cookie完成Nuxt.js中Vuex的持久化 为什么需要Vuex持久化 在开发的过...

  • 实用主义:前端cookie介绍及操作封装

    前言 前端开发中,少不了对cookie进行操作,那么cookie究竟是什么东西呢? Cookie,有时也用其复数形...

  • 浏览器缓存

    一、Cookie 1. cookie: cookie比较老的前端缓存技术了,他的特点是想要使用它前端必须要有服务(...

  • Django的Cookie And Session介绍

    Cookie web开发中,使用session来完成会话跟踪,session底层依赖Cookie技术 Django...

网友评论

      本文标题:前端开发中 cookie使用的总结

      本文链接:https://www.haomeiwen.com/subject/gtratltx.html