用户自定义功能和导航栏的编写（上）

最新推荐文章于 2021-05-26 10:46:39 发布

weixin_34242819

最新推荐文章于 2021-05-26 10:46:39 发布

阅读量308

点赞数

文章标签： python 大数据

原文链接：https://my.oschina.net/xiongyuanliang/blog/533651

版权

2019独角兽企业重金招聘Python工程师标准>>>

当前的百度已经实现了个性化的新闻推送，其他的类似个性化推送，个性化定制，当前来看是一个非常流行的体验（用户可以根据自己的需求选择自己喜欢的栏目），一个平台里往往栏目非常多，要满足很多人的同时，又需要满足个性化，要不然很多不喜欢看的新闻对用户的体验伤害是非常大的，现在的腾讯是强制推送弹窗新闻，就是一个非常不重视用户体验的行为，下一步的方向应该就是可以根据用户自身的喜好订阅，但是QQ用户是可以基于QQ号进行会员新闻定制，但是百度搜索，今日头条这种没有特定帐号的，也需要保持个性化，这个时候，就需要使用js来实现个性化定制效果。

百度网盟推广的精准推送其实也是通过js记录cookie，然后和服务器端进行交互，实现了广告的精准投放。当然，这里写的并没有百度记录搜索关键词那么复杂，这里仅仅实现今日头条的栏目定制效果。

栏目定制的核心算法是：用户在一个定制界面，定制好了栏目后，将其定制的栏目储存在cookie里面，然后在首页或者需要读取头部的时候，从cookie里面读取储存的用户定制的栏目，拼接成导航链接（这样就完成了栏目的定制，由此可见，在禁用cookie的情况下，是无法做到定制栏目的）。当然，如果是打算用来进行对用户进行跟踪，可以让用户自定制的时候，触发ajax同我们服务器端的接口进行交互（我们项目里一个大数据开发的思路就是用户访问我们特定页面的时候，我们为其生成一个唯一识别标志，把这个识别标志储存在客户端，客户端的一些动作会触发和服务器的交互，这样我们就完成了用户的跟踪，一些特定的用户动作可以搜集用户特定偏好和特质，将其存储，然后用一套词库系统对其进行分析，可以对其进行广告精准推送）

下面开始写代码，先完成cookie.js的编写，然后我们引用即可。完成整个思路：

1.首先需要设置一个cookie。

设置一个key=value 并设置天数为有效期，当然也可以设置为分钟，用escape主要是用来储存key为中文时候的情况（否则中文识别的时候，会出现乱码，在手机上特别容易出现乱码，手机浏览器对cookie的中文键识别比较差）

function setCookie(key,value,day) {

var expireDate = new Date();

expireDate.setDate(expireDate.getDate()+day);

document.cookie=escape(key)+'='+escape(value)+';expires='+expireDate.toGMTString();

}

2.设置好了cookie后，我们需要读取cookie

这里用了RegExp对象的匹配功能

function getCookie(key) {

var arr,reg=new RegExp("(^| )"+escape(key)+"=([^;]*)(;|$)");

if(arr=document.cookie.match(reg)) return unescape(arr[2]);

else return null;

}

3.当用户取消不需要的导航栏目的时候，需要对cookie进行移除，移除就是把有效期减少到当前

function removeCookie(key) {

var expireDate = new Date();

expireDate.setDate(expireDate.getDate()-1);

document.cookie=escape(key)+'='+''+';expires='+expireDate.toGMTString();

}

4.额外的我们准备了一个客户端唯一识别码生成主要用到了Math.random() 进行生成

function randomString(len) {
　　len = len || 32;
　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
　　var maxPos = $chars.length;
　　var pwd = '';
　　for (i = 0; i < len; i++) {
　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
　　}
　　return pwd;
}

准备好了cookie.js后，我们需要内置我们所有的栏目（可以通过接口和服务器端进行交互，但是为了减轻服务器端的压力，我们一般直接在本地内置我们常用的目录，一般我们运营中是不会轻易更动我们的运营栏目的）这里作为样例，我们内置（关于我们，联系我们，招聘人才，最近新闻，会员注册）五个栏目，用户可以任意增减定义这四个栏目。

//设置cookie
 function setCookie(key,value,day) {
       var expireDate = new Date();
       expireDate.setDate(expireDate.getDate()+day);
       document.cookie=escape(key)+'='+escape(value)+';expires='+expireDate.toGMTString();
   }
  //获取cookie
 function  getCookie(key) {       
      var arr,reg=new RegExp("(^| )"+escape(key)+"=([^;]*)(;|$)");
      if(arr=document.cookie.match(reg)) return unescape(arr[2]);
      else return null;  
   }
   //移除cookie
   function  removeCookie(key) {
         var expireDate = new Date();
       expireDate.setDate(expireDate.getDate()-1);
       document.cookie=escape(key)+'='+''+';expires='+expireDate.toGMTString();       
   }
   //客户端和服务端唯一交互的识别码，清C后，识别码消失
   function randomString(len) {
　　len = len || 32;
　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
　　var maxPos = $chars.length;
　　var pwd = '';
　　for (i = 0; i < len; i++) {
　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
　　}
　　return pwd;
}

转载于:https://my.oschina.net/xiongyuanliang/blog/533651