前后端完全分离的是目前web开发的大趋势,包括现下流行的前端框架的应用vue,angular,在不同页面跳转时,前端需要对用户登录状态进行判断,拿到用户的id,除了Ajax从服务器端获取数据外,对cookie的操作亦必不可少。

设置cookie
每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:
document.cookie="userId=666";
如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:

document.cookie="userId=666; userName=steve";

在cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。

保存的值是不确定的解决方案:用escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储于cookie值中,而且使用此种方案还可以避免中文乱码的出现。

例如:

document.cookie="str="+escape("I love javascript");

相当于: document.cookie="str=I%20love%20javascript";

当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

首先设置两个看看:

document.cookie = "userId=666";

document.cookie = "userName=steve";

var myCookie = document.cookie;

console.log(myCookie)

封装的cookie操作:

//toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串,并返回结果。

//不赞成使用此方法:请使用 toUTCString() 取而代之。

function getCookie(name) {

var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

if (arr = document.cookie.match(reg))

return unescape(arr[2]);

else {

return null;

}

function delCookie(name) {

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = getCookie(name);

if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

}

//设定自定义过期时间 ,程序代码

function setCookie(name, value, time) {

var strsec = getsec(time);

var exp = new Date();

exp.setTime(exp.getTime() + strsec * 1);

document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

}

function getsec(str) {

var str1 = str.substring(1, str.length) * 1;

var str2 = str.substring(0, 1);

if (str2 == "s") {

return str1 * 1000;

} else if (str2 == "h") {

return str1 * 60 * 60 * 1000;

} else if (str2 == "d") {

return str1 * 24 * 60 * 60 * 1000;

}

}

//有设定过期时间的使用:

//s20是代表20秒

//h是指小时,如12小时则是:h12

//d是天数,30天则:d30

//以下是测试代码:

setCookie("name", "mark", "s5");

console.log(myCookie);

setTimeout(function(){

delCookie("userName");

console.log(myCookie);

}, 7000 );

 //==============================整理一下,项目应用

(function() {

var myCookie = {};
    myCookie.getCookie = function(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    };

function getsec(str) {
        var str1 = str.substring(1, str.length) * 1;
        var str2 = str.substring(0, 1);
        if (str2 == "s") {
            return str1 * 1000;
        } else if (str2 == "h") {
            return str1 * 60 * 60 * 1000;
        } else if (str2 == "d") {
            return str1 * 24 * 60 * 60 * 1000;
        }
    };

myCookie.setCookie = function(name, value, time) {
        var strsec = getsec(time);
        var exp = new Date();
        exp.setTime(exp.getTime() + strsec * 1);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    };

myCookie.delCookie = function(name) {

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = myCookie.getCookie(name);

if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

};

window.myCookie = myCookie;

})(window.myCookie || {});

//初始cookie数据

document.cookie = "userId=666";

document.cookie = "userName=stevejobs";

myCookie.setCookie("name", "helloword", "s5");

console.log(document.cookie);

setTimeout(function() {

myCookie.delCookie("userName");

console.log(document.cookie);

}, 7000);

前端cookie操作用到的一些小总结的更多相关文章

  1. 学习笔记: JavaScript/JQuery 的cookie操作

    转自:http://blog.csdn.net/barryhappy/archive/2011/04/27/6367994.aspx cookie是网页存储到用户硬盘上的一小段信息.最常见的作用是判断 ...

  2. Cookie操作-----Selenium快速入门(十一)

    什么是cookie?顾名思义,就是饼干,小甜饼.而根据读音则是“曲奇”的意思,相信不少的人都吃过.而在网络上,cookie是指浏览器在本地的一种少量数据的存储方式.例如,我们常见的,登陆的时候有个ch ...

  3. 前端的CRUD增删改查的小例子

    前端的CRUD增删改查的小例子 1.效果演示 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> & ...

  4. Vue之cookie操作(原生)

    Vue之cookie操作(原生) 再vue组件中加入以下几个方法,然后调用即可. methods:{ //读取cookie,需要注意的是cookie是不能存中文的,如果需要存中文,解决方法是后端先进行 ...

  5. 第一百八十七节,jQuery,知问前端--cookie 插件,注册成功后生成cookie,显示登录状态

    jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...

  6. Cookie 详解以及实现一个 cookie 操作库

    Cookie 详解以及实现一个 cookie 操作库 cookie 在前端有着大量的应用,但有时我们对它还是一知半解.下面来看看它的一些具体的用法 Set-Cookie 服务器通过设置响应头来设置客户 ...

  7. 【WebView】Android WebView中的Cookie操作

    Hybrid App(混合式应用)的开发过程中少不了与WebView的交互,在涉及到账户体系的产品中,包含了一种登录状态的传递.比如,在Native(原生)界面的登录操作,进入到Web界面时,涉及到账 ...

  8. Selenium系列(21) - Cookie操作和源码解读

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  9. Python脚本控制的WebDriver 常用操作 <二十八> 超时设置和cookie操作

    超时设置 测试用例场景 webdriver中可以设置很多的超时时间 implicit_wait.识别对象时的超时时间.过了这个时间如果对象还没找到的话就会抛出异常 Python脚本 ff = webd ...

随机推荐

  1. 委托(2).net 1.x中的委托

    上一篇已经演示了使用委托实现一个多语言问候的程序,这一篇文章来总结一下在.net 1.x中委托的使用方法. 既然委托是一个类型(class),那么它就要经历像类一个先声明,然后new一个对象,最后调用 ...

  2. Elasticsearch必备技能之索引迁移

    将ES中的索引拷贝到其他ES中,是不是很重要呢? 长话短说,推荐一个工具: 一.elasticsearch-dump 安装: #yum install epel-release #yum instal ...

  3. 3 Redis 的常用五大数据类型

    2016-12-21 14:54:20 该系列文章链接NoSQL 数据库简介Redis的安装及及一些杂项基础知识Redis 的常用五大数据类型(key,string,hash,list,set,zse ...

  4. cSharp:反射 Reflection

    /// <summary> /// 利用反射调用插件方法 /// 涂聚文(Geovin Du) /// 2019-03-27 /// /// </summary> /// &l ...

  5. 不指定源ip时,系统选择哪个ip作为ping包的源ip?

    问题:当centos 有多个网口,发起ping包时,是根据什么规则来确定是使用哪个源ip? 解答:根据目的ip来确定,迭代可以确定源ip 具体的确定方法是, (1)先根据目的ip来确定使用哪个路由表项 ...

  6. 缓存ABC

    缓存ABC Intro 缓存是一种比较常见的用来将提高系统性能的方式.从线程缓存.进程缓存.到内存缓存再到分布式缓存再到CDN,都是属于缓存的范畴. 缓存的本质是空间换时间以提高读的效率,牺牲一些内存 ...

  7. adb部署及使用

    一 掌握adb部署&使用方法及常用命令 1.何为adb? sdk软件开发套件software development kit apk是安卓应用安装包 adb是android sdk的一个工具, ...

  8. 智能POS(轻餐、正餐同理)桌台页面已结金额,只做参考,不做对账使用

    智能POS桌台已结金额只用来做参考使用,不做对账保障: 已结金额只有桌台一次结账金额,若存在反结账或退款的情况则不会减去相应的已结金额: 点餐无桌台的订单,金额不做统计: 口碑订单.扫码点餐,金额不做 ...

  9. Greenplum扩容

    Greenplum支持原有主机扩展Segment个数.新增主机.和混合扩展 本文以在已有机器上扩展节点为例 1.可按照hostname:address:port:fselocation:dbid:co ...

  10. 【转载】xilinx 高速收发器Serdes深入研究

    此篇文章深入浅出介绍了关于高速串行收发器的几个重要概念和注意事项,为方便知识点复习总结和后续查阅特此转载,原文标题及链接为:xilinx 高速收发器Serdes深入研究 - CSDN博客   http ...