在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能。

js方法的完整代码如下:

 var cookie = {
set:function(key,val,time){//设置cookie方法
var date=new Date(); //获取当前时间
var expiresDays=time; //将date设置为n天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化为cookie识别的时间
document.cookie=key + "=" + val +";expires="+date.toGMTString(); //设置cookie
},
get:function(key){//获取cookie方法
/*获取cookie参数*/
var getCookie = document.cookie.replace(/[ ]/g,""); //获取cookie,并且将获得的cookie格式化,去掉空格字符
var arrCookie = getCookie.split(";") //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
var tips; //声明变量tips
for(var i=0;i<arrCookie.length;i++){ //使用for循环查找cookie中的tips变量
var arr=arrCookie[i].split("="); //将单条cookie用"等号"为标识,将单条cookie保存为arr数组
if(key==arr[0]){ //匹配变量名称,其中arr[0]是指的cookie名称,如果该条变量为tips则执行判断语句中的赋值操作
tips=arr[1]; //将cookie的值赋给变量tips
break; //终止for循环遍历
}
}
return tips;
}
}

代码中已经加入了注释,因此某些个别数值需要调整的话,可以自行修改代码。当然了,如果多加一两个参数也不是不可以,自行发挥吧。

下面简单的说明一下设置与获取的方法,便于前端开发新手用户使用:

1.设置cookie的方法为:cookie.set(key,val,time)

key可以理解为cookie的变量名

val可以理解为这个cookie所带有的值

time是cookie的超时时间,单位为天

2.获取cookie的方法为:cookie.get(key)

key就是刚才我们设置时的cookie变量名

我们只需要将函数赋值给新的变量即可调用这个值,例如:var n = cookie.get(key);

如何调试与查看cookie?

cookie可以通过某些浏览器的开发人员工具进行查看,本文暂以Chrome为例。

打开页面后,可以通过 “右键-> 审查元素 ->resources”,然后如下图中,设置了一个font-size为例,可以查看到变量名、值、和过期时间等信息

-------------------本宝宝再补充一丢丢-----------------------

1.关于设置或获取浏览器cookie(简而言之) 

  var cookies = document.cookie; //读取
  document.cookie["Key"]="值"; //设置

2.关于在chrome中查看Cookie有个简便的方法,如下图:

-------------------------------补充完毕-------------------------------

转载原文链接 http://www.frontopen.com/1943.html

转载出处   品味人生 2014年03月02日 于 前端开拓者 发表

【转】分享前端开发中通过js设置/获取cookie的一组方法的更多相关文章

  1. 一探前端开发中的JS调试技巧

    前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  2. 前端开发中的JS调试技巧

    前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  3. 【repost】一探前端开发中的JS调试技巧

    有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...

  4. 一探前端开发中的JS调试技巧(转)

    有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...

  5. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  6. 初学者Web介绍一些前端开发中的基本概念用到的技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

  7. Web前端开发中的MCRV模式(转)

    作者: izujian  来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...

  8. px em rem在WEB前端开发中的区别

    我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...

  9. WEB前端开发中的图片压缩

    web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...

随机推荐

  1. 简易Samba服务器配置

    Samba的作用是在Linux和windows之间通过网络进行资源共享.下面是简单的一个文件共享例子: 1.安装samba.samba-client服务 yum install samba samba ...

  2. EM算法——Expectation-Maximization

    最大似然估计 一个栗子:假如去赌场,但是不知道能不能赚钱,你就在门口堵着出来一个人就问一个赚了还是赔了,如果问了5个人都说赚了,那么你就会认为,赚钱的概率肯定是非常大的. 已知:(1)样本服从分部的模 ...

  3. CSS sprites

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式. 优点: 它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一 ...

  4. VS 编译后 install报错(error MSB3073)

    vs编译出现如下错误: 错误 1 error MSB3073: 命令"setlocal H:\PCL_BACKUP\PCL\CMake\bin\cmake.exe -DBUILD_TYPE= ...

  5. 前端调用后端接口下载excel文件的几种方式

    今天有一个导出相应数据为excel表的需求.后端的接口返回一个数据流,一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax ...

  6. 【BZOJ】3209: 花神的数论题

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3209 显然是按照二进制位进行DP. 考虑预处理$F[i][j]$表示到了二进制的第$i$位 ...

  7. linux查看历史操作记录并且显示执行时间

    vim  ~/.bashrc 或者 ~/.bash_profile 增加:export HISTTIMEFORMAT="%F %T  " 查看历史记录之前先执行: 然后使用hist ...

  8. CentOS6.5下搭建VNC服务器

    VNC(Virtual Network Computing,虚拟网络计算机)是一款由AT&T欧洲研究实验室开发的远程控制软件,允许用户在网络的任何地方使用简单的程序来和一个特定的计算机进行交互 ...

  9. 设计模式(八)Proxy Parttern 代理模式

    核心作用: 通过代理,控制对对象的访问 可以详细控制某个对象的方法,在调用这个方法做前置处理,调用这个方法后做后置处理(AOP的微观实现) AOP(Aspect Oriented Programmin ...

  10. Qt532.【转】Qt创建鼠标右键菜单

    ZC:可以通过 设置  (QWebView*)->setContextMenuPolicy(NoContextMenu); 来关闭 QWebView的默认右键菜单 Qt创建鼠标右键菜单_疯华正茂 ...