通过localstorage和cookie实现记录文章的功能
我们在做页面的时候,会考虑记录用户曾经看过的文章的功能,并记录下来在页面中显示!但是在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实现记录文章的功能的更多相关文章
- localStorage sessionStorage cookie indexedDB
目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...
- localStorage跟cookie的使用
最近做了记住密码功能,用localStorage跟cookie都尝试用了一下,感觉都挺好哈,很方便,特此记录 html代码: <input type="text" id=&q ...
- cookie和session,sessionStorage、localStorage和cookie的区别
1.cookie 含义: 存储在访问者的计算机中的变量,即存储在客户端 创建一个cookie /* getCookie方法判断document.cookie对象中是否存有cookie,若有则判断该co ...
- localStorage和cookie的跨域解决方案
原文转自:点我 前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙 ...
- sessionStorage 、localStorage 与cookie 的异同点
cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...
- sessionStorage 、localStorage 和 cookie 之间的区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- sessionStorage 、localStorage 和 cookie 之间的区别(转)
essionStorage .localStorage 和 cookie 之间的区别(转) 2012-05-08 14:29:19| 分类: HTML5CSS3WEBAPP|举报|字号 订阅 ...
- 本地存储sessionStorage 、 localStorage 、cookie整理
sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...
- sessionStorage、localStorage、cookie
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
随机推荐
- 批量创建采购订单 BAPI_PO_CREATE1
*&---------------------------------------------------------------------* *& REPORT ZMM_PO_C ...
- ocp认证考试指南第一章
数据库存储结构: 物理数据库存储结构: 必须的三类文件: 控制文件(controlFile):multiplexing the controfile 多路复用控制文件,指向其它关键文件,存储序列号和时 ...
- HDU 4283 You are the one(间隔DP)
标题效果: The TV shows such as You Are the One has been very popular. In order to meet the need of boys ...
- opencv在arm和x86在移植
一个.开发环境 操作系统:fedora14 Opencv版本号:2.0 Qt版本号:4.7 arm:mini6410 交叉编译工具:arm-linux-gcc-4.5.1 二.安装与配置 Linux系 ...
- InstallShield安装包中集成第三方安装包的方案选择
原文:InstallShield安装包中集成第三方安装包的方案选择[转] 我们在制作安装包时,有些情况下会涉及第三方安装的集成,这里将讨论如何调用安装第三方包,以及需要注意的事项. 第三方安装包的 ...
- C# LDAP 管理(创建新用户)
今天用C#实现了一套LDAP域账号的创建和查询,感受挺多. 算是第一次接触LDAP吧,之前曾经做了一个登录的验证,就是查询功能,那个相对比较简单,用到了一个方法就搞定了. 这次的需求是要用编程的方式创 ...
- oracle之sql语句优化
oracle之sql语句优化 sql语句的优化 1.在where子句中使用 is null 或 is not null 时,oracle优化器就不能使用索引了. 2.对于有连接的列,即使最有一个是静态 ...
- obj-c编程04:类的继承
这第4篇内容比較少,主要说的是obj-c中的类的继承,须要说明的是我仅仅是写了继承中最简单的形式,假设所有展开来说,那就多了去了!关键是如今肚子里还没装够墨水,没法展开啊! 以下的代码中,我们写了2个 ...
- C++定义自己的命名空间和头文件
下面的例子演示如何使用一个简单的演示空间和自己的头文件定义.码如下面: compare.h: namespace compare{ double max(const double* data,int ...
- CSS+DIV+JQuery实际的视频汇总
在牛腩中学习过CSS和DIV.在JS中学习过CSS+JS 封装,在这里又回想了一遍,也作为查漏补缺,也算比較系统的复习了一遍吧. css核心内容主要包含四个方面:标准流.盒子模型,浮动和定位,而在B/ ...