西门的后花园

一个热爱网络的年轻人的博客

jQuery cookie保存背景颜色、字体颜色和字体大小

因为工作需要,小说网站内容页都会有改变背景颜色、字体颜色和字体大小等选项,所以昨天花时间研究了一下。无意间发现jQuery还有cookie这个插件,我一开始以为jQuery自带这个属性,和Ajax差不多。所以就简单的学习了下这款插件的用法,简单的模仿出一个demo,功能都有了,到时候小小修改就可以上战场了。jQuery cookie插件官方介绍

cookie插件不算大,代码+注释(占大部份)也才4K,所以我肯定毫不犹豫的推荐给大家,如果大家网站本来就需要加载jQuery,那是最好的啦!插件代码会在最下面的下载包提供大家下载。

首先是个最简单的cookie示例:demo

“写入cookie”是传值,“读取cookie”是输出,“删除cookie”是清空。

每句话我也在源码里面注释了,大家可以右键查看源代码。

在这里我也简单的解释下:

写入一个名称为“blog”,值为“ons.me”的cookie:

$.cookie("blog", "ons.me");

写入一个名称为“blog”,值为“ons.me”的cookie,设置过期时间为10天:

$.cookie("blog", "ons.me", {expires: 10 });

写入一个名称为“blog”,值为“ons.me”的cookie,设置过期时间为10天,cookie的路径为/目录:

$.cookie("blog", "ons.me", {path: '/', expires: 10});

这里感谢CSS9的教程,同时cookie的路径可以参考这里。插一句,虽然我是通过Google找到他们的,但是也要带上别人的链接,尊重他们版权是所有人的义务!

OK,cookie插件是不是很简单呢?基本就只要设置最下面那种里面的四项就差不多了。

下面就开始利用cookie来保存选取的背景颜色、字体颜色和字体大小了。请看demo

怎么看是否保存到cookie里面了呢?选取好后,刷新网页即可见效果。我已经测试了IE6/7/8、FF、chrome、opera、safari,全部正常,如果大家发现bug,请及时留言哦!

在这里就不解释什么了,右键查看源代码,里面基本每句的意思我都写上注释了,如果还看不懂,那我就没辙了。建议大家如果选项较多,用switch,如果比较少,用if。我两种方法都写在里面了,大家灵活运用!

cookie是个好东西,比如有的博客喜欢用“显示、关闭侧边栏”,加上cookie,就不用访客每次来都按了。还有的博客喜欢写几个CSS样式,加个cookie对用户体验也好嘛!反正大家灵活运用cookie咯!

最后提醒一下,chrome不支持本地cookie保存,所以写cookie的时候,不要用chrome测试,我昨天花了大半个小时,就是绕在这里了…

完整示例代码下载

评论列表

  1. cooike是个好东西啊..呵呵

  2. 原来我是沙发呢,嘿嘿

  3. 😳 我是板凳么………..我还没有折腾到这步…..我的首页文章怎么还是那么多字…调不得

  4. 尊重别人就是尊重自己,赞!

  5. 前排占座哇

  6. 空间挂了,正好这两天歇歇。。。

  7. 像论坛那样访客可以自己调整字体大小?

  8. 效果很不错的说
    只是个人博客还是不要去折腾了

  9. 😆 没看demo的时候 我先以为你是把数值直接保存进去的..一看demo是用的1.2.3.4 = =.. :mrgreen: 跟咱思路不同 😳

  10. 还没玩过cookie呢。

  11. 😯 这种效果应该只适合小说站,毕竟那里人多,看得久。逛博客的人不超过5分钟,弄了也没人用。

    • 我确实是为了小说站来找这代码的,我记录到博客上面,有需要的朋友搜索方便嘛,资源共享!

  12. 再来水你一下 😳 😳 😳 😳

  13. 😕 呃~不太懂~只能看看~汗

  14. cookie是好东西,但是放太东西可不好。

  15. 文章不错,加油

  16. 虽然不懂Cookie, 进demo看看觉得还是挺好玩的 😈

  17. 对俺来说还是很有难度。。。看不咋懂。

  18. chrome不支持本地cookie保存,那他是保存在哪里呢??Cookie功能不错。。 😳 😳

    • 没办法保存,本地测试一定不要用chrome。但是如果是点网络里面的网站,比如我上面的demo,chrome是完全没问题的。

  19. 不支持COOKIES吗 😮

  20. 研究的挺深诶

  21. CSS应该也是可以达到这样的效果的吧?

  22. 哦,看看去,以前我用自己写的,只需要创建/删除两个功能就够了

  23. jQuery的Cookie操纵很是方便,我用在了边栏显示隐藏上

  24. 对这个没太多的在意,不过现在很多网站都很好的利用这个推荐给网友更多相关的东西。

  25. 搞网站的人和搞网站的人的对话 除了一堆代码 我没地儿点广告啊………… 😥

  26. 不想去折腾这些了,嘿嘿。

  27. 来溜溜 ❗ ❗

  28. 这个玩意不错

  29. 好像这玩意影响速度是不?

    • 这个功能是不会影响速度的,但是加载jQuery库会影响。
      一般网站都会有cookie功能,不然他是怎么记得住你登陆过的呢?

  30. ❗ 谢谢分享了!

  31. chrome不支持本地cookie保存?我用javascript写的操作cookies的函数,可以在Chrome下用,而且估计就击败字节

    • 这个我就不知道了,反正我那天测试jQuery的cookie时,弄了大半个小时,就是不保存。然后我去群里问,有人就说了这个问题。但是如果上传到网站上,cookie又好了… ❓

  32. 嗯,对js和cookie都不甚了解,学习一下

  33. 注释写的很清楚…

    研究下.

    拿到自己站去用. :mrgreen:

  34. 😎 悄悄的看了看,正好用上

  35. 貌似只能是uft-8编码的页面?GBK就乱码了 😮

  36. 小含

    不错不错,正好用得上

  37. 忘穿秋裤

    你这歌就这三首吗?快更新吧,很期待你的歌!!!! 😳 💡

  38. 最近换公司需要大量Jquery,今天学习Cookies ,下载了你的代码慢慢看。

N进行回复 取消回复

分类目录