分类
日志

Cookie 在前端开发中的一些事

Cookie 操作在前端开发过程中会经常遇到。

Cookie 的属性

除了 name(名)和 value(值), Cookie 还有以下一些可选属性,用来控制 Cookie 的有效期,作用域,安全性等:

expires属性

指定了 Cookie 的生存期,默认情况下 Cookie 是暂时存在的,他们存储的值只在浏览器会话期间存在,当用户退出浏览器后这些值也会丢失,如果想让 Cookie 存在一段时间,就要为 expires 属性设置为未来的一个用毫秒数表示的过期日期或时间点,expires 默认为设置的 expires 的当前时间。现在已经被 max-age 属性所取代,max-age 用秒来设置 Cookie 的生存期。

分类
其他

配合使用 Cookie 控制边栏的显示隐藏

发现很多博客都添加了边栏的显示隐藏功能,但是没有保存状态,只要一切换页面边栏又出来的,隐藏功能变得耍帅多于实用。为此我查找了一下 jQuery 的 Cookie 操作教程,使边栏隐藏状态保存到 Cookie ,切换页面照样隐藏,效果就像小博这样。

本来我使用的 jQuery 代码是五木好同志的“完美终结版”,但是使用 cookie 后会出现第一次点击无效的情况,估计是因为他使用的是 toggle 方法,toggle 就是模拟鼠标的连续单击事件,在两种状态下切换,隐藏边栏是第一状态,如果你本来就隐藏了边栏,第一次点击时还是切换到第一状态,其实状态没有改变,出现无效点击的错觉。

分类
其他

JavaScript 的 Cookie 控制

这是当年看着书学习修改的代码,用来控制banner的显示与否。

原理:正常情况下显示 banner,当点击关闭按钮时,通过 turnoff(obj); 函数添加一条cookie: guide_status=guide_close ,并设置 CSS display 为 none。通过 readcookie(the_info); 函数读取 cookie ,判断 guide_status=guide_close 是否存在,存在即设置 CSS display 为 none。

函数:

turnoff(obj);
function turnoff(obj){
//设置cookie过期时间,这里设为2012发生日
var the_date=new Date("December 21, 2012");
var the_cookie_date=the_date.toUTCString();
//写入cookie+过期时间
document.cookie="guide_status=guide_close;expires="+the_cookie_date;
//隐藏banner
document.getElementById(obj).style.display="none";
}

该函数以 onclick 事件插入到关闭按钮中: onclick=”javascript:turnoff(‘guidebar’)” ,guidebar 为 banner ID。