通过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请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
随机推荐
- 编写高质量JavaScript代码绳之以法(The Essentials of Writing High Quality JavaScript)翻译
原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...
- CSDN博客导出工具 Mac By Swift
写这篇文章的主要目的是了解Swift语言本身,如何以及Objc和第三方交互框架 必须先用CSDN帐户登录.您可以导出所有的博客文章,加入YAML当首标信息,包括对应标签和分类在头制品信息,和底座式(原 ...
- 应用spss可靠性分析软件
问卷调查的可靠性分析 一.概念: 信度是指依据測验工具所得到的结果的一致性或稳定性,反映被測特征真实程度的指标. 一般而言,两次或两个測验的结果愈是一致.则误差愈小,所得的信度愈高,它具有下面 ...
- RS-232协议和RS-485协议
RS232 RS232是一种异步传输标准接口.通常 RS-232 接口以9个引脚 (DB-9) 或是25个引脚 (DB-25) 的型态出现 .RS232最经常使用的连接方式是三根线:一条发送线.一条接 ...
- chrome扩展第三方浏览器下载安装
1.使用其他浏览器打开谷歌应用市场,复制扩展详情地址url 2. 粘贴到:http://chrome-extension-downloader.com/中进行扩展的下载. 3. 拖拽到chrome e ...
- Linux 2.6 完全公平调度算法CFS(Completely Fair Scheduler)
分析
转会http://www.ibm.com/developerworks/cn/linux/l-completely-fair-scheduler/index.html? ca=drs-cn-0125 ...
- NPOI以及在ASP.NET MVC中的使用
NPOI以及在ASP.NET MVC中的使用 1.前言 相信大家在工作中经常要遇到一些导入导出Execl操作.学习贵在分享,分享使人快乐,园子里的前辈已经有很多好的文章,鄙人也是能力有限,在这里把这些 ...
- Android开发模板------自己定义SimpleCursorAdapter的使用
使用SimpleCursorAdapter所设计的table(数据表)一定要有_id字段名称,否则会出现"找不到_id"的错误 SimpleCursorAdapter直接使用的方法 ...
- DevExpress Report 其他常用设计技巧
原文:DevExpress Report 其他常用设计技巧 1 设置默认的打印纸张及页边距 选择Report-打开属性窗口,设置默认边距(Margins)和默认纸张(PaperKind). 2 修改R ...
- 高速建成Android开发环境ADT-Bundle和Hello World
----下载JDK(Java Dev Kit) 官方下载:http://www.oracle.com/technetwork/java/javase/downloads/index.html 兴许步骤 ...