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

//如果浏览器支持,并且浏览器版本大于IE8
if(window.localStorage && $.browser.version!=8.0 && $.browser.version!=7.0){
late = {
storage : {},
isinit : 0,
maxnum : 6, //最多存储的数量
key : 'vestigial',
_init:function(){
if (late.isinit === 1) {
return true;
} else if (late.isinit === 0 && window.localStorage) {
late.isinit = 1;
late.storage = window.localStorage; //本地存储
return true;
} else {
return false;
}
},
get:function(){ //获取记录
if(late._init()){
var data = late.storage.getItem(late.key);
return JSON.parse(data); //解析json串
}else{
return false;
}
},
set:function(value){ //设置记录
if(late._init()){
var data = late.storage.getItem(late.key);
data = JSON.parse(data);
if(data === null){ //判断是否为空
data = [];
}
if (data.length === 6) { //是否已经超过记录的最大值
data.pop(); //移除最后插入的
}
data.unshift(value); //在最前面插入新加的字符串
data = JSON.stringify(data); //序列化json串
late.storage.setItem(late.key, data); //添加记录
return true;
}else{
return false;
}
}
};
var flag = $("#newsflag").val();//获取标记位置,判断是否为新闻
if(flag==0) {
var each = late.get();
if(!each){
$(".Myrecord_list").html('<p class="no_font">您暂无看过的内容</p>');
}else{
var _length = each.length;
var temp = '';
for(i=0; i<_length; i++){
var str = JSON.stringify(each[i]);//序列化字符串
var _objs = JSON.parse(str);//解析json串
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>';
}
$(".Myrecord_list").html(temp);//将记录添加到容器里
}
}else{//flag=1 新闻内页
var obj = {
img:$("#news_img_s").val(), //图片路径
title:$("#news_title_s").val(), //标题
desc:$("#news_desc_s").val(), //描述
url:document.location.href,//浏览器url
id:$("#news_id_s").val()//是否为新闻标记
};
if(obj.img==''){//如果没有存储的图片,调用统一的图片进行替换
obj.img = '/images/v2/1_img.jpg';
}
var each = late.get();//获取记录
if(!each){
late.set(obj);//设置记录
}
else{
var eachlength = each.length;
for(i=0; i<eachlength; i++){
var str = JSON.stringify(each[i]);
var _obj = JSON.parse(str);
if(obj.id ==_obj.id){
break;
}else{
if(i==(eachlength-1)){
late.set(obj);
break;
}else{
continue;
}
}
}
}
each = late.get();
var _length = each.length;
var temp = '';
for(i=0; i<_length; i++){
var str = JSON.stringify(each[i]);
var _objs = JSON.parse(str);
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>';
}
$(".Myrecord_list").html(temp);
}
}
else{//执行cookie
var flag = $("#newsflag").val();
if(flag == 1){
//设置和存储cookie
var art_title = document.title;//新闻标题
//var _id = $("#news_id_s").val();
var art_url = document.URL;//url
var news;
var json="[";
var json1;
var canAdd= true;
//var json1=eval("({sitename:'dreamdu',sitedate:new Date(1980, 12, 17, 12, 0, 0)})");
if(!$.cookie("news")){
//第一次的时候需要初始化
news = $.cookie("news","{title:\""+art_title+"\""+",url:\""+art_url+"\"}");//存储记录
}else {//如果记录已经存在
//已经存在
news = $.cookie("news");//获取cookie
json1 = eval("("+news+")");//解析cookie
$(json1).each(function(){//对记录进行循环
if(this.title==art_title){//如果是相同的记录
canAdd=false;
return false;
}
})
if(canAdd){
$(json1).each(function(){
json = json + "{\"title\":\""+this.title+"\",\"url\":\""+this.url+"\"},";
})
json = json + "{\"title\":\""+art_title+"\",\"url\":\""+art_url+"\"}]";
$.cookie("news",json,{expires:7});
}
}
}
//展示cookie
if($.cookie("news")){
var json = eval("("+$.cookie("news")+")");
var list ="";
$(json).each(function(){
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>';
})
$(".Myrecord_list").html(list);
}
else{
$(".Myrecord_list").html('<p class="no_font">您暂无看过的内容</p>');
}
}

通过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. OCP-1Z0-051-标题决心-文章2称号

    2. View the Exhibit to examine the description for the SALES table. Which views can have all DML ope ...

  2. 获得mysql内容,生成xml文件,另外,为了webservice发送

    <xyt> <news id> <url></url> <title></title> </news> </x ...

  3. Oracle EBS WMS特征(一)

    Oracle EBS WMS特征(一) (版权声明.我的原创或翻译的文章,如需转载,转载用于个人学习,转载请注明出处:否则,请与我联系,版权所有) Oracle WMS这是一个仓库管理,它是Oracl ...

  4. javascript系列之执行上下文

    原文:javascript系列之执行上下文 写在前面:一 直想系统的总结一下学过的javascript知识,喜欢这门语言也热爱这门语言.未来想从事前端方面的工作,提前把自己的知识梳理一下.前面写了些 ...

  5. Git批量删除

    Git批量删除 git的改动都需要stage过程后才能commit.当git中有大量改动时就需要能够批量操作在方便.改动分三种: modify: 有文件修改 add: 有文件增加 rm: 有文件删除 ...

  6. Java设计模式菜鸟系列(四)工厂方法模式建模与实现

    转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39760895 工厂方法模式(Factory Method) 工厂方法:顾名思义,就是调用工 ...

  7. [Java] 一、对象的创建 & 销毁

    *1.考虑静态工厂方法(static factory method)代替构造器?!优势?不足? 服务提供者架构: 1.服务接口(Service Interface) -- 提供者实现的: 2.提供者注 ...

  8. 【百度地图API】百度API卫星图使用方法和卫星图对比工具

    原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度 ...

  9. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  10. POJ 2187: Beauty Contest(旋转卡)

    id=2187">Beauty Contest Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 27218   ...