我们在做页面的时候,会考虑记录用户曾经看过的文章的功能,并记录下来在页面中显示!但是在IE低版本的下是不支持localstorage的功能,只能采用cookie来代替本地存储的功能!实现的方法如下!

  1. //如果浏览器支持,并且浏览器版本大于IE8
    if(window.localStorage && $.browser.version!=8.0 && $.browser.version!=7.0){
  2. late = {
  3. storage : {},
  4. isinit : 0,
  5. maxnum : 6, //最多存储的数量
  6. key : 'vestigial',
  7. _init:function(){
  8. if (late.isinit === 1) {
  9. return true;
  10. } else if (late.isinit === 0 && window.localStorage) {
  11. late.isinit = 1;
  12. late.storage = window.localStorage; //本地存储
  13. return true;
  14. } else {
  15. return false;
  16. }
  17. },
  18. get:function(){ //获取记录
  19. if(late._init()){
  20. var data = late.storage.getItem(late.key);
  21. return JSON.parse(data); //解析json串
  22. }else{
  23. return false;
  24. }
  25. },
  26. set:function(value){ //设置记录
  27. if(late._init()){
  28. var data = late.storage.getItem(late.key);
  29. data = JSON.parse(data);
  30. if(data === null){ //判断是否为空
  31. data = [];
  32. }
  33. if (data.length === 6) { //是否已经超过记录的最大值
  34. data.pop(); //移除最后插入的
  35. }
  36. data.unshift(value); //在最前面插入新加的字符串
  37. data = JSON.stringify(data); //序列化json串
  38. late.storage.setItem(late.key, data); //添加记录
  39. return true;
  40. }else{
  41. return false;
  42. }
  43. }
  44. };
  45. var flag = $("#newsflag").val();//获取标记位置,判断是否为新闻
  46. if(flag==0) {
  47. var each = late.get();
  48. if(!each){
  49. $(".Myrecord_list").html('<p class="no_font">您暂无看过的内容</p>');
  50. }else{
  51. var _length = each.length;
  52. var temp = '';
  53. for(i=0; i<_length; i++){
  54. var str = JSON.stringify(each[i]);//序列化字符串
  55. var _objs = JSON.parse(str);//解析json串
  56. temp += '<li class="clearfix"><a href="'+ _objs.url +'" class="block fl"><img src="'+ _objs.img +'" width="86" height="48"></a><div class="Myrecord_list_f fr"> <a href="'+ _objs.url +'"><h2>'+_objs.title+'</h2><p>'+ _objs.desc +'</p></a></div></li>';
  57. }
  58. $(".Myrecord_list").html(temp);//将记录添加到容器里
  59. }
  60. }else{//flag=1 新闻内页
  61. var obj = {
  62. img:$("#news_img_s").val(), //图片路径
  63. title:$("#news_title_s").val(), //标题
  64. desc:$("#news_desc_s").val(), //描述
  65. url:document.location.href,//浏览器url
  66. id:$("#news_id_s").val()//是否为新闻标记
  67. };
  68. if(obj.img==''){//如果没有存储的图片,调用统一的图片进行替换
  69. obj.img = '/images/v2/1_img.jpg';
  70. }
  71. var each = late.get();//获取记录
  72. if(!each){
  73. late.set(obj);//设置记录
  74. }
  75. else{
  76. var eachlength = each.length;
  77. for(i=0; i<eachlength; i++){
  78. var str = JSON.stringify(each[i]);
  79. var _obj = JSON.parse(str);
  80. if(obj.id ==_obj.id){
  81. break;
  82. }else{
  83. if(i==(eachlength-1)){
  84. late.set(obj);
  85. break;
  86. }else{
  87. continue;
  88. }
  89. }
  90. }
  91. }
  92. each = late.get();
  93. var _length = each.length;
  94. var temp = '';
  95. for(i=0; i<_length; i++){
  96. var str = JSON.stringify(each[i]);
  97. var _objs = JSON.parse(str);
  98. temp += '<li class="clearfix"><a href="'+ _objs.url +'" class="block fl"><img src="'+ _objs.img +'" width="86" height="48"></a><div class="Myrecord_list_f fr"> <a href="'+ _objs.url +'"><h2>'+_objs.title+'</h2><p>'+ _objs.desc +'</p></a></div></li>';
  99. }
  100. $(".Myrecord_list").html(temp);
  101. }
  102. }
  103. else{//执行cookie
  104. var flag = $("#newsflag").val();
  105. if(flag == 1){
  106. //设置和存储cookie
  107. var art_title = document.title;//新闻标题
  108. //var _id = $("#news_id_s").val();
  109. var art_url = document.URL;//url
  110. var news;
  111. var json="[";
  112. var json1;
  113. var canAdd= true;
  114. //var json1=eval("({sitename:'dreamdu',sitedate:new Date(1980, 12, 17, 12, 0, 0)})");
  115. if(!$.cookie("news")){
  116. //第一次的时候需要初始化
  117. news = $.cookie("news","{title:\""+art_title+"\""+",url:\""+art_url+"\"}");//存储记录
  118. }else {//如果记录已经存在
  119. //已经存在
  120. news = $.cookie("news");//获取cookie
  121. json1 = eval("("+news+")");//解析cookie
  122. $(json1).each(function(){//对记录进行循环
  123. if(this.title==art_title){//如果是相同的记录
  124. canAdd=false;
  125. return false;
  126. }
  127. })
  128. if(canAdd){
  129. $(json1).each(function(){
  130. json = json + "{\"title\":\""+this.title+"\",\"url\":\""+this.url+"\"},";
  131. })
  132. json = json + "{\"title\":\""+art_title+"\",\"url\":\""+art_url+"\"}]";
  133. $.cookie("news",json,{expires:7});
  134. }
  135. }
  136. }
  137. //展示cookie
  138. if($.cookie("news")){
  139. var json = eval("("+$.cookie("news")+")");
  140. var list ="";
  141. $(json).each(function(){
  142. list += '<li class="clearfix"><a href="'+ this.url +'" class="block fl"><img src="/images/v2/1_img.jpg" width="86" height="48"></a><div class="Myrecord_list_f fr"> <a href="'+ this.url +'"><h2>'+this.title+'</h2><p>'+ this.title +'</p></a></div></li>';
  143. })
  144. $(".Myrecord_list").html(list);
  145. }
  146. else{
  147. $(".Myrecord_list").html('<p class="no_font">您暂无看过的内容</p>');
  148. }
  149. }

通过localstorage和cookie实现记录文章的功能的更多相关文章

  1. localStorage sessionStorage cookie indexedDB

    目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...

  2. localStorage跟cookie的使用

    最近做了记住密码功能,用localStorage跟cookie都尝试用了一下,感觉都挺好哈,很方便,特此记录 html代码: <input type="text" id=&q ...

  3. cookie和session,sessionStorage、localStorage和cookie的区别

    1.cookie 含义: 存储在访问者的计算机中的变量,即存储在客户端 创建一个cookie /* getCookie方法判断document.cookie对象中是否存有cookie,若有则判断该co ...

  4. localStorage和cookie的跨域解决方案

    原文转自:点我 前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙 ...

  5. sessionStorage 、localStorage 与cookie 的异同点

    cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...

  6. sessionStorage 、localStorage 和 cookie 之间的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  7. sessionStorage 、localStorage 和 cookie 之间的区别(转)

    essionStorage .localStorage 和 cookie 之间的区别(转) 2012-05-08 14:29:19|  分类: HTML5CSS3WEBAPP|举报|字号 订阅     ...

  8. 本地存储sessionStorage 、 localStorage 、cookie整理

    sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...

  9. sessionStorage、localStorage、cookie

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

随机推荐

  1. 编写高质量JavaScript代码绳之以法(The Essentials of Writing High Quality JavaScript)翻译

    原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...

  2. CSDN博客导出工具 Mac By Swift

    写这篇文章的主要目的是了解Swift语言本身,如何以及Objc和第三方交互框架 必须先用CSDN帐户登录.您可以导出所有的博客文章,加入YAML当首标信息,包括对应标签和分类在头制品信息,和底座式(原 ...

  3. 应用spss可靠性分析软件

    问卷调查的可靠性分析 一.概念:     信度是指依据測验工具所得到的结果的一致性或稳定性,反映被測特征真实程度的指标. 一般而言,两次或两个測验的结果愈是一致.则误差愈小,所得的信度愈高,它具有下面 ...

  4. RS-232协议和RS-485协议

    RS232 RS232是一种异步传输标准接口.通常 RS-232 接口以9个引脚 (DB-9) 或是25个引脚 (DB-25) 的型态出现 .RS232最经常使用的连接方式是三根线:一条发送线.一条接 ...

  5. chrome扩展第三方浏览器下载安装

    1.使用其他浏览器打开谷歌应用市场,复制扩展详情地址url 2. 粘贴到:http://chrome-extension-downloader.com/中进行扩展的下载. 3. 拖拽到chrome e ...

  6. Linux 2.6 完全公平调度算法CFS(Completely Fair Scheduler) 分析

    转会http://www.ibm.com/developerworks/cn/linux/l-completely-fair-scheduler/index.html? ca=drs-cn-0125 ...

  7. NPOI以及在ASP.NET MVC中的使用

    NPOI以及在ASP.NET MVC中的使用 1.前言 相信大家在工作中经常要遇到一些导入导出Execl操作.学习贵在分享,分享使人快乐,园子里的前辈已经有很多好的文章,鄙人也是能力有限,在这里把这些 ...

  8. Android开发模板------自己定义SimpleCursorAdapter的使用

    使用SimpleCursorAdapter所设计的table(数据表)一定要有_id字段名称,否则会出现"找不到_id"的错误 SimpleCursorAdapter直接使用的方法 ...

  9. DevExpress Report 其他常用设计技巧

    原文:DevExpress Report 其他常用设计技巧 1 设置默认的打印纸张及页边距 选择Report-打开属性窗口,设置默认边距(Margins)和默认纸张(PaperKind). 2 修改R ...

  10. 高速建成Android开发环境ADT-Bundle和Hello World

    ----下载JDK(Java Dev Kit) 官方下载:http://www.oracle.com/technetwork/java/javase/downloads/index.html 兴许步骤 ...