通过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请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
随机推荐
- Hadoop加zookeeper构建高可靠集群
事前准备 1.更改Linux主机名,每个人都有配置 vim /etc/sysconfig/network NETWORKING=yes HOSTNAME=hadoop-server1 2.改动IP / ...
- Async和Await进行异步编程
使用Async和Await进行异步编程(C#版 适用于VS2015) 你可以使用异步编程来避免你的应用程序的性能瓶颈并且加强总体的响应.然而,用传统的技术来写异步应用是复杂的,同时编写,调试和维护都很 ...
- 如何定义AIDL跨进程间通信
当进程A要去调用进程B中的service时,并实现通信,我们通常都是通过AIDL来操作的 projectA: 首先在我们自己的包com.wzp.aidlservice中创建一个RemoteServic ...
- [搜索] hdu 4016 Magic Bitwise And Operation
主题链接: http://acm.hdu.edu.cn/showproblem.php?pid=4016 Magic Bitwise And Operation Time Limit: 6000/30 ...
- AndroidUI组件之TabHost
package com.gc.tabhost; /** * @author Android将军 * * * * 1.TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置 * 多 ...
- CentOS7 安装kubernetes
2台机器,1台为Master,1台为Node 修改Host Master为dmaster,Node为dslave 安装K8s and Etcd 在Master机器上安装 yum install etc ...
- Java对存储过程的调用方法
本文将介绍Java怎样实现对存数过程的调用方法,作者用了几个样例进行了具体的说明,简单明了,很适合刚開始学习的人. 一.Java怎样实现对存储过程的调用: A:不带输出參数的 create proce ...
- Eclipse 发布到网站的附加产品的形式 Update Site
Eclipse 发布到网站的附加产品的形式 Update Site 通过Update Site Project项目将自己做的插件产品公布到公网上,给客户或其它測试人员下载和应用,这样自己的插件就以网站 ...
- Java中间MD5加密算法完整版
携带Java软件开发过程.,因此Java中提供了自带的MessageDigest实现对文本的加密算法,以下是一个对文本进行加密的MD5加密工具类代码演示样例: package net.yuerwan. ...
- ABP应用层——审计日志
ABP应用层——审计日志 点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之19.ABP应用层——审计日志 ABP是“ASP.NET Boilerplate Pro ...