js原生cookie封装函数 - 简书
js原生cookie封装函数
Cookie是什么(还有session)？
cookie 和 session 都是用来储存一些 浏览器用户的信息， 举个例子—
当用户登陆你的网站，在登陆页面(这个文件为login.html ) 登陆成功后需要跳转到首页(index.html) ，然后在首页加载你的个人信息
那么如何把之前登陆页面的信息传递到首页去呢，这里就用cookie或者session存起来，然后再把这个信息在首页index.html显示，只要用户访问的是这个网站，那么存在这里面的信息都可以用到。
也可以理解成这两个是一个小数据库，然后可以在本网站的如何一个页面储存信息或者读取信息，来实现数据的交互。
前期接触H5的码友在接触cookie的时候可能会有茫然，而网上百度的都是JQ引入封装好的cookie方法，确实JQ是特别方便的，但是这给一些刚刚学JS同学造成困难，那么我们如何利用JS的知识去设置浏览器cookie呢？
想研究JS原生的码友可以看下小夜自己封装的关于cookie设置，删除，和获取的方法，而现在还不会用JQ的码友可以将下面的代码复制下来直接使用。
//设置Cookie
function setCookie(name,value,lostTime,path) {
//首先判断用户传入参数的个数，至少传入2个参数
if(arguments.length==2){
document.cookie=name+"="+//直接设置
else if(arguments.length==3){
varifLp=typeof(arguments[2]);//需要判断用户输入的第三个参数类型
if(ifLp=="number"){
var Cookietime=newDate();
Cookietime.setDate(Cookietime.getDate()+lostTime);
document.cookie=name+'='+value+';expires='+C//设置自定义时间的Cookie
else{document.cookie=name+"="+value+";path="+arguments[2];//设置自定义地址的Cookie}
varCookietime=newDate();
Cookietime.setDate(Cookietime.getDate()+lostTime);
document.cookie=name+'='+value+';expires='+Cookietime+";path="+//设置全部自定义属性的Cookie
//获取Cookie
function getCookie(name) {
vararr=document.cookie.split('; ');
for(vari=0;i
vararr2=arr[i].split('=');
if(arr2[0] == name ){return arr2[1];}
//删除Cookie
function removeCookie(name,path) {
setCookie(name,1,-1,path);
setCookie(name,1,-1);
1. 设置cookie
在引入上面代码的前提下：
setCookie("userName","xiaoye",0,"/");
函数接受四个参数：
第一参数：必填，设置cookie的名称
第二参数：必填，设置改名称下cookie的值(内容)
第三参数：选填，设置cookie过期的时间，不填或者填0都为默认，默认浏览器关闭时移除
第四参数：选填，设置cookie的路径。(对于初学者可先放一边)
在只天三个参数的情况下，代码会自动判断所写第三个参数的类型。
2. 获取cookie
所以说设置了cookie要干嘛，就是在其他页面需要的时候快速调用。
getCookie("userName");
获取参数没搞什么花样，就是传入cookie的名称即可返回改cookie的值(内容)
3. 删除cookie
removeCookie("userName","/");
所以删除cookie可以接受一到两个参数，路径如果之前没有设置可以不用传入。
好了，就是这些了，这是小夜用原生js自己封装起来的cookie函数,对于高级开发来说肯定是不够用的，但是目前按小夜的技术水平来说，这个就够用了哦，欢迎大家批评指正，学习代码之路永无止境~！
HTTP cookie(也称为web cookie,网络cookie,浏览器cookie或者简称cookie)是网站发送的一个小的数据片段，当用户浏览时，会通过用户的浏览器保存在用户的电脑上。通过Cookie这种可靠的机制，网站可以记录状态信息(例如在电商网站中放到购物车中...
作者：晚晴幽草轩www.jeffjade.com//115-summary-of-cookie/ 背景 在HTTP协议的定义中，采用了一种机制来记录客户端和服务器端交互的信息，这种机制被称为cookie，cookie规范定义了服务器和客户端交互信息的格式...
背景在HTTP协议的定义中，采用了一种机制来记录客户端和服务器端交互的信息，这种机制被称为cookie，cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于...
注：本文转载自前端大全 背景 在HTTP协议的定义中，采用了一种机制来记录客户端和服务器端交互的信息，这种机制被称为cookie，cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。 在JavaScript中可以通过 document.cookie...
1. cookie 1.1 什么是cookie cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。 众所周知，Web协议（也就是HTTP）是...
学过美术的人都知道，三庭五眼，所谓三庭，最中间的一庭就是鼻子了，这个部位，在面相之中占据很大的比重，一个人的鼻形如何，往往能看出来这个人中年以后的运势如何，也大概能看得出这个人是否是富贵或者贫穷之相。 剑锋鼻 剑锋鼻说与典型的克夫之相，一般鼻翼下沉鼻孔窄小，整体面相给人以尖...
面朝大海 春暖花开.... 五一没有去太远的地方， 坐了半个小时车来到了龙回头， 每年都会来这里 每次都会被美到 沙滩上有好多小螃蟹
像个孩子，得不到认可，就要立马翻脸。 晚饭时给舍友发扣扣，询问是否做她的晚饭，好久才回复，要旋蒸不回来了。自己给自己做了番茄鸡蛋炒面，还熬了苹果汤，在面里加了一些老干妈香菇酱，吃着超好吃。晚上下班回来，就马不停蹄的像舍友描述自己做的饭有多好吃，对方一脸不屑，来一句，“哼，你...
不要在开车时收听负面新闻 据统计，如果人们用三个月的开车时间收听励志或教育类的有声书，就等于上了一学期大学课程。 如今，开车时间已经成为了自我激励的最佳时机之一。 过去，人们总觉得开车时间什么也干不了，花在路上的时间既消极又沮丧。但现在，人们再也没有任何理由白白浪费开车的时...frontopen主题V1.5.04.15版本已发布 推荐更新！
frontopen “讨论区” 正式上线
鸣谢主题捐赠者：感叹帝,Calon YE，孙玉龙，魂客，创想，孜夕寒
顾余笑，小菜，晨风，菠菜，*忠杰，浪子，99开发赞助，IT江湖，小熊
如果发现更新最新版出现缩略图无法显示，请先装回v1.4.03.02版本
分享前端开发中通过js设置cookie的一组方法
分享前端开发中通过js设置cookie的一组方法
围观7476次
编辑日期： 字体：
我们在前端开发中，通常都需要获取并记录用户的某些操作设置，这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能。
此次文章中的方法是在前端开发工作中自己随手写的一组通过js设置与获取cookie的方法，能够应用在多说情况下，没做细挖与深究，就当作是抛砖引玉吧。
js方法的完整代码如下：
var cookie = {
set:function(key,val,time){//设置cookie方法
var date=new Date(); //获取当前时间
var expiresDays=
//将date设置为n天以后的时间
date.setTime(date.getTime()+expiresDays*24*); //格式化为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的数组中
//声明变量tips
for(var i=0;i&arrCookie.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
//终止for循环遍历
代码中已经加入了注释，因此某些个别数值需要调整的话，可以自行修改代码。当然了，如果多家一两个参数也不是不可以，自行发挥吧。
下面简单的说明一下设置与获取的方法，便于前端开发新手用户使用
设置cookie的方法为：cookie.set(key,val,time)
key可以理解为cookie的变量名
val可以理解为这个cookie所带有的值
time是cookie的超时时间，单位为天
获取cookie的方法为：cookie.get(key)
key就是刚才我们设置时的cookie变量名
我们只需要将函数赋值给新的变量即可调用这个值，例如：var n = cookie.get(key);
方法写的不算复杂，比较适合前端开发新手使用。
如何调试与查看cookie？
cookie可以通过某些浏览器的开发人员工具进行查看，本文暂以Chrome为例。
打开页面后，可以通过 “右键-& 审查元素 -&resources”，然后如下图中，设置了一个font-size为例，可以查看到变量名、值、和过期时间等信息
如果对本文有什么意见，或者建议欢迎在本页面留言
本文固定链接:
转载请注明:
作者：品味人生
就是一个管理员，frontopen的管理员，嗯，介绍完毕！
如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！
您可能还会对这些文章感兴趣！JavaScript 的path 怎么设置cookie的路径
[问题点数：20分，结帖人qq_]
JavaScript 的path 怎么设置cookie的路径
[问题点数：20分，结帖人qq_]
只显示楼主
取消只显示楼主
匿名用户不能发表回复！|jquery cookie的用法总结
jQuery cookie是个很好的cookie插件，大概的使用方法如下
example $.cookie('name', &value');
设置cookie的值，把name变量的值设为value
example $.cookie('name', &value', {expires: 7, path: &/', domain: &jquery.com', secure: true});
新建一个cookie 包括有效期 路径 域名等
example $.cookie('name', &value');
新建cookie
example $.cookie('name', null);
删除一个cookie
var account= $.cookie('name');
取一个cookie(name)值给myvar
. 代码如下:
jQuery.cookie = function(name, value, options) {
&&& if (typeof value != 'undefined') { // name and value given, set cookie
&&&&&&& options = options || {};
&&&&&&& if (value === null) {
&&&&&&&&&&& value = '';
&&&&&&&&&&& options.expires = -1;
&&&&&&& var expires = '';
&&&&&&& if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
&&&&&&&&&&&
&&&&&&&&&&& if (typeof options.expires == 'number') {
&&&&&&&&&&&&&&& date = new Date();
&&&&&&&&&&&&&&& date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
&&&&&&&&&&& } else {
&&&&&&&&&&&&&&& date = options.
&&&&&&&&&&& }
&&&&&&&&&&& expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
&&&&&&& var path = options.path ? '; path=' + options.path : '';
&&&&&&& var domain = options.domain ? '; domain=' + options.domain : '';
&&&&&&& var secure = options.secure ? '; secure' : '';
&&&&&&& document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
&&& } else { // only name given, get cookie
&&&&&&& var cookieValue =
&&&&&&& if (document.cookie && document.cookie != '') {
&&&&&&&&&&& var cookies = document.cookie.split(';');
&&&&&&&&&&& for (var i = 0; i & cookies. i++) {
&&&&&&&&&&&&&&& var cookie = jQuery.trim(cookies[i]);
&&&&&&&&&&&&&&& // Does this cookie string begin with the name we want?
&&&&&&&&&&&&&&& if (cookie.substring(0, name.length + 1) == (name + '=')) {
&&&&&&&&&&&&&&&&&&& cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
&&&&&&& return cookieV
然后看了下Discuz!中对cookie的操作方法
如下,发现少了个遍历用;分割的数组的处理
. 代码如下:
function getcookie(name) {
var cookie_start = document.cookie.indexOf(name);
var cookie_end = document.cookie.indexOf(&;&, cookie_start);
return cookie_start == -1 ? '' : unescape(document.cookie.substring(cookie_start + name.length + 1, (cookie_end & cookie_start ? cookie_end : document.cookie.length)));
function setcookie(cookieName, cookieValue, seconds, path, domain, secure) {
var expires = new Date();
expires.setTime(expires.getTime() + seconds);
document.cookie = escape(cookieName) + '=' + escape(cookieValue)
+ (expires ? '; expires=' + expires.toGMTString() : '')
+ (path ? '; path=' + path : '/')
+ (domain ? '; domain=' + domain : '')
+ (secure ? '; secure' : '');js中常用cookie操作_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
js中常用cookie操作
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢}