美味小饼干——cookie实战之结合cookie给最新日志添加论坛式‘new’图标
看到cookie这个词，我就想起骇客帝国中的先知和那个小女孩。但是现在要说的不是骇客帝国，也不是它的本意小饼干，而是当你浏览网页时保存于电脑上的小文件。它很有用，也很好用。
文章列表最新发布的日志标题后面加上一个“new”图标或其他标识，可以给访客以提示，告诉他那些日志是新的，最近发布的。就像进入许多论坛，看到那些帖子列表后面都有各种小图标那样。实现这个非常容易，php或JavaScript都可以做到，代码网上估计有很多，我这里就不贴了。我主要想说通过保存读取cookie来控制标识符的添加，因为不可能一个读者已经看了这篇文章了你还弄个“new”标志放文章后面，这样就不人性化了，访客体验也不高。
我用的添加标题后图标的方法是php实现的，所以以下介绍的控制图标添加是以php为例，如果你通过JavaScript判断添加图标，只需将读取判断cookie的变更为相应的js代码即可。
先说一下我的思路，我想通过读取浏览器中的相应cookie值，存在相应cookie则不添加标志符，那么首先就要往浏览器中存入cookie，php或JavaScript都可。我首先试了php方法，按照网上介绍的方法，不知道怎么回事，一直报错。于是我便用了JavaScript方法。
首先获取文章列表的ID，我用的是jQuery，不过用原生JavaScript也多不了几行代码，如果你引入了jQuery，就不要浪费了它。这里主要用到jQuery的选择器，方便选择到我们需要的元素。
1: $(document).ready(function() {//文档装载完毕执行
2: $('.post h2 a:has(img)').click(function(){
3: /*这里是选择标签为h2的a链接，并且用筛选器:has()筛选出包含img标签的a链接，即添加了标识符的文章标题，并添加click动作操作*/
4: var info=$(this).parent().parent().attr('id');
5: /*获取被点击的这个标题所在的文章ID，你根据自己定的文档模型自定义，然后赋值给info变量*/
6: var exdate = new Date((new Date()).getTime() + 10 * 86400000);
7: /*定义cookie过期时间，这里精确点，我定义10天，你要改变cookie时效只需将10变更为你需要的天数即可*/
8: document.cookie=info+'_new=no;expires='+exdate.toGMTString()+'domain=你的域名;path=/;';
9: /*这里定义了cookie的名称以及值，过期时间及路径，domain处填写自己的域名即可，这一项可省略，但是不建议*/
10: });
11: });
可以看到以上只用到了jQuery的选择器，这里是图方便，因为我已经引入了jQuery，没必要再去写一堆JavaScript了。
现在我们已经成功地在用户点击文章时向他的浏览器中保存了名称为post-ID_new，值为no，有效期为10天，作用于“domain.com（你的域名）”存在于根目录的一个cookie（验证可在访问过我的网站之后查看浏览器保存的cookie，即会发现它）。接下来就是读取和改变文章列表的标识符了。我们只需在添加标识符的php代码前添加一段判断是否存在这个cookie的语句。
1: <?php if(!$_COOKIE['post-'.$post->ID.'_new']=='no') : ?>
2: //添加标识符的代码
3: <?php endif; ?>
通过读取cookie，如果有相应的cookie值，说明用户已经点击过相应文章，如此一来，我们就不必向此类文章标题后面添加标识符了。这里使用了相反的判断，即不存在相应cookie才添加标识符。
还可以更完美一点，比如当用户点击文章标题后，即用JavaScript去除这个标题后的标识符。
再有，如果用户不是通过文章列表点击进去浏览文章的，而是通过搜索或订阅器进来的，看到的是日志内页，我们要保证访客点击首页回到文章列表后看过的文章后面不再出现标识符，那么就还需要在日志单页添加cookie，
1: $(document).ready(function() {
2: $('.post).attr('id');
3: var exdate = new Date((new Date()).getTime() + 10 * 86400000);
4: document.cookie=info+'_new=no;expires='+exdate.toGMTString()+'domain=你的域名;path=/;';
5: });
这里更简单，因为日志内页只有一个.post属性，我们直获取他的id值即可，然后就是和上面一模一样的生成cookie的语句。注意，这里domain一定不能省，如果省了这句，后面cookie保存路径对于有些博客会出问题，保存不到根目录，因为path是相对的。之所以要保存到根目录，是为了让首页能读取到此cookie。如果不指定domain，’path=/’这样指定路径在首页保存cookie没什么问题，可以保存到根目录，对于没有设置固定连接的博客在内页也能保存到根目录。但是如果你的固定链接包含url深度，如‘/%year%/%month%/………’，cookie就会保存到‘/year/month’这样的目录下。而cookie是不能读取子目录的，所以对首页的判断读取cookie时是不能读取到这个子目录中的cookie的。之前我设置广告位时，因为没有指定domain，我其实是想通过关闭内页一个位置的广告来关闭所有页面相应的广告的，但是由于cookie位置不同，所以只能保证关闭当前页面广告后不再出现，换个页面广告还会出现，所以我才设置了留过言用户看不到广告。不过现在我倒觉得这样挺好，所以就没改，虽然已经知道问题出在哪里了。
还有一点，比如你是将最近10天内日志加上标识符，那么cookie的过期时间最好也设置大于10天。否则不到十天这个cookie就失效了，然后他再来访问，就又会出现标识符了。
不知道以上说的对不对，我是这样理解的。有错误希望指出。
注：用于日志单页的js代码请不要让其在首页出现，可以用WP函数is_single()来限制添加页面。
第一次写这种类似教程一般的文章，难免有纰漏之处。我这里说的很简单，但你需要做的远不止这么些。
关于cookie的设置存取，由于jQuery也没有对cookie的读取进行自己的定义，所以即使是使用jQuery也没什么简单的设置cookie的方法。如果你觉得用document.cookie()方法难以理解，网上有许多封装好的定义cookie的JavaScript函数，jQuery也有设置cookie的插件，可以更简单的调用，自己可以网上看看。
random posts
most commented posts
Post Addresses :http://www.qiqiboy.com/2009/12/22/add-a-cookie-to-the-log-with-the-latest-new-icon.html
If you like this post, welcome Subscribe my blog.
47 Responses to “美味小饼干——cookie实战之结合cookie给最新日志添加论坛式‘new’图标”
-
-
-
-
-
-
-
-
-
-
-
-
@ whisperer : 遨游，世界之窗，搜狗这些会默认使用IE8的兼容模式，即IE7模式。我也是用IE8的兼容模式当成IE7来测试主题的
难道原生IE7和IE6一样会错位？明天找个真正的IE7测试一下。。。
-
-
-
-
-
-
@ 星网 : 我的字体设置：”Chalkboard”,”Comic Sans MS”,”Lucida Grande”,”Microsoft YaHei”,Verdana,Lucida,Arial,Helvetica,宋体,sans-serif
第一个是为苹果电脑设置的，windows系统上不存在，所以英文字体就是第二个了。。你将”Comic Sans MS”添加到你的font-family中就行了。。
-
-
-
-
@ Zenoven自由人 : 要是guestbook都另起一行了，这个就是你修改了浏览器的默认设置，我的css字体使用em，不是px，如果浏览器默认字体大小不是默认的16px，就会出现页面字体也随之变化。。你是不是将你浏览器字体设置的大于16px了。。。。然后，我的导航字体就也变大了？
因为我测试过所有浏览器。。。IE6下也只是稍微错位。。。-
@ QiQiBoY : 我这是傲游，因为大部分情况下傲游和IE的显示都是一样的，他们都是IE8的核心，所以刚才我说是IE8了，而这次却不同，刚试了下傲游下还是错位，我对浏览器字体什么的从来都是不修改的
-
-
-
-
-
@ Leeiio : 呵呵，你来的太巧了，我刚好在调整存cookie的方法，之前的无论你阅读我的任何一篇文章包括很早的都会往电脑上存入cookie，刚才做了修改，只有阅读最新的文章时才会存入cookie。旧的文章，也就是不会加入new的文章都不会存入cookie了。
现在你可以再测试一下，可以打开一下最近的几篇文章，然后再打开一个月前的文章，看看浏览器中都存入了哪些cookie。。。。嘿嘿。应该是post-id-new,值为no，有效期15天的cookie。
cookie确实容易丢失，但是这貌似也是目前唯一的方法了。。论坛可以通过用户注册在数据库中保留用户的阅读信息，WP不可能让每个人都注册吧。。。
-
-
-
-
-
-
★ ♀ ★ ★
◆ 聖 ◆ ◆
誕快樂
♀ ★ 聖誕☆快樂 ★ ♀ ★
聖誕◆快樂★聖
◆ 誕快樂聖誕★快樂聖 ★
誕快樂聖誕 ♀ ♀
◆ ★ 快樂★聖誕快樂 ★
聖誕快樂聖誕★快樂 ◆
聖誕快樂◆聖誕快樂聖誕 ★
♀ ★ 聖誕快樂聖誕快 ♀
聖誕快★樂◆聖誕快 ♀
★ 樂聖誕快樂聖誕快★聖誕
快樂聖誕★聖誕快樂聖◆誕快 ★
♀ 快樂聖誕快樂聖誕快樂聖誕快樂聖 ◆
聖誕快樂
♀ 聖誕快樂~~
╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬
圣诞快乐 时刻记的保持微笑哦 健康幸福快乐的过着每一天！
