通过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请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
随机推荐
- Java NIO系列教程(三) Buffer(转)
Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...
- Android - 建设项目的版本号
建设项目的版本号 本文地址: http://blog.csdn.net/caroline_wendy 依据SVN中的项目, 构建本地版本号, 进行开发, 构建方式是: 1. "svn co& ...
- python2.7和 python3.4但是不要
很多 Python 刚開始学习的人想知道他们应该从 Python 的哪个版本号開始学习.对于这个问题我的答案是 "你学习你喜欢的教程的版本号.然后检查他们之间的不同. " 可是假设 ...
- u_boot启动过程中的具体分析(1)
闭上眼睛,细致的回顾一下从NAND FLASH 启动的整个流程,首先,当我们打开板子的时候,先执行的就是嵌入在芯片上的iROM,它的作用就是为了把.NAND Flash 中的bootloader的一部 ...
- ZOJ-3652-Maze(BFS)
Celica is a brave person and believer of a God in the bright side. He always fights against the mons ...
- Winform 实现像菜单一样弹出层
原文:Winform 实现像菜单一样弹出层 在实际工作中,如果能像菜单一样弹出自定义内容,会方便很多,比如查询时,比如下拉列表显示多列信息时,比如在填写某个信息需要查看一些信息树时.这个时候自定义弹出 ...
- Maven学习笔记(四):协调和依赖
Maven协调具体的解释: Maven定义了这样一组规则:世界上不论什么一个构件都能够使用Maven坐标唯一标识.Maven坐标的元素包含groupId.artifactId.version ...
- 大数据系列修炼-Scala课程04
Scala中继承实现:超类的构造.字段重写.方法重写 关于超类的构建:超类可以在子类没有位置的限制,可以在子类中调用父类的方法 类中字段重写:在重写字段前面加一个override就可以重新赋值 类中方 ...
- jquery选择器基础知识
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("di ...
- .pb.h:9:42: fatal error: google/protobuf/stubs/common.h: No such file or directory
看看这个你应该知道,找不到头文件,它可用于g++ 的-I 参数: -I/usr/local/lib/protobuf/include如需订购g++在/usr/local/lib/protobuf 以上 ...