分类： note

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

Cookie 的属性

除了 name（名）和 value（值）， Cookie 还有以下一些可选属性，用来控制 Cookie 的有效期，作用域，安全性等：

expires属性

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

如果 max-age 属性为正数，则表示该 Cookie 会在 max-age 秒之后自动失效。浏览器会将 max-age 为正数的 Cookie 持久化，即写到对应的 Cookie 文件中。无论客户关闭了浏览器还是电脑，只要还在max-age秒之前，登录网站时该 Cookie 仍然有效。

如果 max-age 为负数，则表示该 Cookie 仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该 Cookie 即失效。max-age 为负数的 Cookie ，为临时性 Cookie ，不会被持久化，不会被写到 Cookie 文件中。 Cookie 信息保存在浏览器内存中，因此关闭浏览器该 Cookie 就消失了。 Cookie 默认的 max-age 值为-1。

如果 max-age 为0，则表示删除该 Cookie 。 Cookie 机制没有提供删除 Cookie 的方法，因此通过设置该 Cookie 即时失效实现删除 Cookie 的效果。失效的 Cookie 会被浏览器从 Cookie 文件或者内存中删除。

如果不设置 expires 或者 max-age 这个 Cookie 默认是 Session 的，也就是关闭浏览器该 Cookie 就消失了。

这里要说明一下：Session 的 Cookie 在 IE6 下，如果用户实在网页上跳转打开页面或新开窗口（包括 target=”_blank”，鼠标右键新开窗口），都是在同一个 Session 内。如果用户新开浏览器程序或者说是进程再打开当前的页面就不是同一个Session。其他浏览器只要你 Session 存在，还是同一个 Session， Cookie 还能共享。在前段时间的项目中 IE6 下吃了很大一个亏。

Domain 属性

Domain 属性可以使多个 WEB 服务器共享 Cookie 。Domain 属性的默认值是创建 Cookie 的网页所在服务器的主机名。不能将一个 Cookie 的域设置成服务器所在的域之外的域。

例如让位于a.sodao.com的服务器能够读取b.sodao.com设置的 Cookie 值。如果b.sodao.com的页面创建的 Cookie 把它的 Path 属性设置为“/”，把Domain 属性设置成“.sodao.com”，那么所有位于b.sodao.com的网页和所有位于a.sodao.com的网页，以及位于sodao.com域的其他服务器上的网页都可以访问这个 Cookie 。

Path 属性

它指定与 Cookie 关联在一起的网页。在默认的情况下 Cookie 会与创建它的网页，该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联

Secure 属性

它是一个布尔值，指定在网络上如何传输 Cookie ，默认是不安全的，通过一个普通的http连接传输；

HttpOnly 属性

HttpOnly 属性限制了 Cookie 对 HTTP 请求的作用范围。特别的，该属性指示用户代理忽略那些通过“非 HTTP” 方式对 Cookie 的访问（比如浏览器暴露给 js 的接口）。注意 HttpOnly 属性和 Secure 属性相互独立：一个 Cookie 既可以是 HttpOnly 的也可以有 Secure 属性。

Cookie 的传输

浏览器将 Cookie 信息以 name-value 对的形式存储于本地，每当请求新文档时，浏览器将发送 Cookie ，目的是让 Server 可以通过HTTP请求追踪客户。所以从WEB性能的角度来说我们要尽量的减小 Cookie ，以达到传输性能的最大化。

Cookie 的编码和解码

由于 Cookie 的名/值中的值不允许包含分号，逗号和空格符，为了最大化用户代理和服务器的兼容性，任何被存储为 Cookie 值的数据都应该被编码，例如用我们前端熟知的 js 全局函数 encodeURIComponent 编码和 decodeURIComponent 解码。

Cookie 作为客户端存储

前面说了每当请求新文档时，浏览器将发送 Cookie 到服务器，导致WEB性能下降。所以不建议将 Cookie 作为客户端存储一种实现方案，替代方案参见：JavaScript 本地存储实践（html5 的 localStorage 和 ie 的 userData）等。

同名的 Cookie

同名的 Cookie ，不同的 Domain 或不同的 Path ，属不同的 Cookie ；同名的 Cookie ，相同的 Domain 且相同的 Path ，不同的 expires，属同一个 Cookie 。

浮动的元素不在文档流占据空间，如下图所示，里面的方框分别左右浮动，容器并没有被撑开。IE6 除外，但也有需要清除的时候。

我说 IE6 除外只是因为此框框在 IE6 表现正常，并没受浮动影响，至于真相是什么，还有待考究。

HTML结构

<div id='container'>
	<div id='left'>填充文字</div>
	<div id='right'>填充文字</div>
</div>

解决方法
1.添加额外标签
在容器末尾添加<div style=”clear:both”></div>从而将容器撑开，但这样会添加额外的标签。
Demo

2.浮动容器
将容器 #container 添加 float:left，虽然这样能产生想要的效果，但是下一个元素会受到这个浮动元素的影响。
Demo

3.使用 overflow 属性
应用值为 hidden 或 auto 的 overflow 属性有一个有用的副作用，会自动地清理包含的任何浮动元素。
Demo

4.使用 :after 伪类(IE6无效)
使用 :after 在容器末尾添加新的内容并清除内容浮动。

#container{
	display: inline-block; /*ie for mac*/
}
#container:after{
	content:".";         /*额外的东西越小越好，此处添加一个点*/
	display:block;       /*这是必须的*/
	clear:both;          /*这是必须的*/
	visibility:hidden;   /*隐藏所添加的内容*/
	height:0;            /*不占用空间*/
}

5.其他
IE6 在有些情况下使用以上方法并没有清除浮动，而 IE 很多奇怪的渲染问题可以通过赋予其 layout 得到解决，或者叫触发 IE 的 layout 属性，例如添加 CSS 的 zoom:1，_height:1%，至于什么是 layout ，我也不太懂，可以搜索一下。

欢迎探讨~

昨天说过要在家里等考试，旅游也去不了，而今天我决定要去旅游，估计周末也不会考试滴~

与之前 简单的 jQuery 前台评论表单验证 不同在于这个代码是当文本框失去焦点时验证，也就是填完一个框到下一个框时就验证，也是很轻量的。

jQuery(function(){
	$('#commentform :input').blur(function(){ //当表单里的输入框失去焦点时
		if($(this).is('#author')){
			if(this.value==""){
				//这里添加了一个 CSS 类 onError ，需要在 CSS 里面添加，我只设置了背景颜色
				//其最大作用还是辅助判断是否发生错误，有错误则存在 onError 类
				$(this).addClass("onError"); 
			}else{
				$(this).removeClass("onError");
			}
		}
		if($(this).is('#email')){
			if(this.value=="" || !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test(this.value)){
				$(this).addClass("onError");
			}else{
				$(this).removeClass("onError");
			}
		}
		if($(this).is('#url')){
			if(this.value!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test(this.value)){
				$(this).addClass("onError");
			}else{
				$(this).removeClass("onError");
			}
		}
		if($(this).is('#comment:first')){
			if(this.value==""){
				$(this).addClass("onError");
			}else{
				$(this).removeClass("onError");
			}
		}
	});
	$('#submit').click(function(){
		$('#commentform :input').trigger('blur'); 		//提交时再全局验证
		var numError=$('#commentform .onError').length; //判断 onError 类是否存在
		if(numError){ 									//存在则禁止提交
			return false;
		}
	});
});

WordPress 当然也有表单的验证，不过大家都知道用户体验一点都不好，页面发生跳转，有时还会把表单清空了，而前台表单认证显得非常有必要了。以下是我写的通过改变文本框背景颜色提示用户输入内容，WordPress 只要把以下代码放到 js 文件里就能工作了。验证由点击提交按钮触发，工作原理看注释。

//表单验证
$(function(){
    $('#submit').click(function(){
        var $author=$('#author').val();   //名称
        var $email=$('#email').val();     //邮箱
        var $url=$('#url').val();         //网址
        var $textarea=$('textarea:first').val();   //评论
        var $errorNo=0;
        if($author==""){
            $('#author').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#author').css("background","#FFF");
        }
        if($email==""){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else if(!/^(?:[a-zd]+[_-+.]?)*[a-zd]+@(?:([a-zd]+-?)*[a-zd]+.)+([a-z]{2,})+$/i.test($email)){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#email').css("background","#FFF");
        }
        if($url!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test($url)){
            $('#url').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#url').css("background","#FFF");
        }
        if($textarea==""){
            $('textarea:first').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('textarea:first').css("background","#FFF");
        }
        if($errorNo>0){
            return false;
        }
    });
});

这样一个非常简单的表单验证就出来了~效果就是小博现在这样，欢迎指正改进~

PS:8月14日修正，更严密的正则表达式。
PS2:2013年10月18日修正，真是弄巧反拙，简单复杂化……现已修正。

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

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

下面分享我使用的方法：

jQuery(function(){
	var thesidebar = $.cookie("sidebar"); //读取cookie "sidebar"的值
	if(thesidebar=="hide"){  //"sidebar"的值为"hide"则隐藏边栏
		$('#sidebar').hide().prev().animate({width: "860px"}, 1000); //隐藏边栏并设 #content 宽860px，宽度和速度要修改，结构不同也要改~
		$("#menu-item-2304 a").text("显示边栏"); //修改按钮文字，这里使用的是控制按钮的ID，肯定要修改的
	}
	$("#menu-item-2304 a").click(function(){ //设置按钮点击动作
		if($('#sidebar').is(':visible')){ //如果边栏显示则执行以下代码
			$(this).text("显示边栏");
			$('#sidebar').hide().prev().animate({width: "860px"}, 1000);
			$.cookie("sidebar", "hide", { expires: 3 }); //写入属性 sidebar ，值为 hide ，有效时间 3 天
		}else{ //如果边栏隐藏则执行以下代码
			$(this).text("隐藏边栏");
			$('#sidebar').delay(800).show(0).prev().animate({width: "599px"}, 800); //显示边栏并设 #content 为原来的宽度，宽度和速度要修改，结构不同也要改~
			$.cookie("sidebar", null); //删除 cookie "sidebar"
		};return false //点击链接不跳转
	});
});

原理通过上面的注释应该可以理解了，哈哈。要注意一点，jQuery 本身是不支持 Cookie 操作的，需要使用官方的插件，你可以在这里下载到，http://plugins.jquery.com/project/Cookie，下载后像挂 jQuery 库一样挂上，那就ok了。

具体情况是这样，某个博客的所有日志都有“[视频]”或“[图片]”这样的前缀，现在想把这些前缀去掉。其实方法非常简单，用替换字符函数即可，将“[视频]”或“[图片]”替换成空字符串，语句：

UPDATE wp_posts SET post_title = REPLACE(post_title, '[视频]','');
UPDATE wp_posts SET post_title = REPLACE(post_title, '[图片]','');

然而一时没想替换来，找到了取指定字符数后的所有字符串：

UPDATE wp_posts SET post_title = SUBSTRING(post_title,5);

使用 SQL 语句就省去了很多劳动力呀。

为了找到真理，原文基于vertical-align的表单元素垂直对齐方式研究不厌其烦地进行测试，此精神值得我们学习。

而结论也非常简单，看真相：

CSS:
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle}
body{font-family:tahoma;font-size:12px}

HTML:
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>

解决实际问题的就是 CSS。

小站使用的是 ZWW 的 zSofa ，显然还能看出一点原来的影子。此模板最大的特点呢，是大家看不到的，那就是 single、archives、index 等页面整合在一个 index 中，或者说是没有 single 和 archives 页，通过判断显示不同的内容。这有什么好处呢？控制体积？作用不太明显，而且对于修改者来说需要更多的理解时间…囧。

基本上使用后就没有停止过修改，期间参考过很多牛人的博客，学习了不少东东，让我回忆回忆做了些什么。

去掉/修改：
1.收窄了；
2.导航使用 WordPress 3.0 的自定义菜单；
3.分类目录页只显示文章标题；
4.使用 Google 自定义搜索引擎；
5.去掉后台模板设置项，自觉很多余；
6.评论部分的 CSS 与其他 CSS 分开，只在有评论的地方调用；
7.去掉 CSS 中大量多余属性，并将部分插件的 CSS 整合到一个文件，然后使用工具压缩、合并；
8.替换原来的分页；
9.评论倒序，输入框搬到评论上方

增加了：
1.首页文章收缩；
2.导航菜单、搜索框、边栏、返回顶部的动态效果；
3.lazyload 图片渐显，lightBox 图片查看
4.页面 loading 状态显示；
5.小图标区分内外链
6.“上一篇”和“下一篇”；
7.相关日志标题添加标签；
8.手动维护的 keywords 和 description
9.文章标题和友链的 title 美化
9.启用的插件:Akismet,Baidu Sitemap Generator,cbnet Different Posts Per Page,Code Markup,Comment Info Detector,DB Cache Reloaded,Google XML Sitemaps,Simple Tags,WP-PostViews,WP-Syntax,WP Keyword Link

全世界好像只有我在折腾…习惯了每修改一次就备份一下，然而今天备份次数特别多，5次。认识的人中类似我的还是好像没有的，今天又周期性地感触起来:作为电子商务的学生我很不关心电子商务。

模板就这样好了，不改了，做点别的，找个时间把模板用到的东西总结一下~

WordPress 默认使用的用来来对图像的对齐和块元素的类：

.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left}
.alignright{float:right}
.wp-caption{background-color:#f3f3f3;border:1px solid #ddd;-khtml-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:10px;padding-top:4px;text-align:center}
.wp-caption img{border:0 none;margin:0;padding:0}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

此外，有更多的 WordPress 默认的类标签，你可以选择你想要的风格：

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.children {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.current_page_ancestor {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}